removeClass（）方法无法删除应用于div的css

Question

我通过使用class在div上应用了CSS，我想通过使用jQuery的removeClass（）方法来删除已应用的CSS

如何使用removeClass（）删除CSS的应用类

removeClass（）方法已应用，但单击div后未删除类css

$(document).ready(function() {

  $("div.one").css({
    backgroundColor: 'aqua',
    color: 'black'
  });

  $("div.two").css({
    backgroundColor: 'lightpink',
    color: 'black'
  });

  $("div.three").css({
    backgroundColor: 'lightgreen',
    color: 'black'
  });

  $("div.one").click(function() {

    $("div.one").removeClass("one");

  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="one" id="firstId">
  <p>Heloo first div</p>
</div>
<div class="two" id="secondId">
  <p>Hello second div</p>
</div>
<div class="three" id="thirdId">
  <p>Hello third div</p>
</div>
<h1 style="color: green;">You can remove color if you don't want</h1>

在div上单击后，应删除已应用的css类，并使该div正常。

Answer 1

那是因为当您使用jquery应用CSS时，您的css将被添加到element中。在CSS中定义样式，它应该可以正常工作：

$(document).ready(function() {

   $("div.one").click(function() {

    $("div.one").removeClass("one");

  });

});

div.one
{
 background-color: aqua;
 color: grey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="one" id="firstId">
  <p>Heloo first div</p>
</div>
<div class="two" id="secondId">
  <p>Hello second div</p>
</div>
<div class="three" id="thirdId">
  <p>Hello third div</p>
</div>
<h1 style="color: green;">You can remove color if you don't want</h1>

Answer 2

只需使用jQuery更改CSS。

$(document).ready(function() {
  $("div.one").css({
    backgroundColor: 'aqua',
    color: 'black'
  });

  $(".two").css({
    backgroundColor: 'lightpink',
    color: 'black'
  });

  $(".three").css({
    backgroundColor: 'lightgreen',
    color: 'black'
  });

  $("#firstId").click(function() {
    $("#firstId").css("background-color", "");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="one" id="firstId">
  <p>Hello first div</p>
</div>

<div class="two" id="secondId">
  <p>Hello second div</p>
</div>

<div class="three" id="thirdId">
  <p>Hello third div</p>
</div>

<h1 style="color: green;">You can remove color if you don't want</h1>