jquery - removeClass() 方法无法删除应用于 div 的 css

Question

我使用类在 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 正常。

标签： jquery

Answer 1

那是因为当您使用 jquery 应用它时，您的 css 被添加到元素中。在 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>