javascript - 如何在 jQuery 中第二次单击时删除类

Question

基本上我想要做的是将 .ani 类添加到单击的元素中，并从所有元素中删除 .ani ，但是我还需要从第二次单击时已有的元素中删除 .ani。

正如您所看到的，常规添加和删除工作正常，但我无法删除现有元素上的 .ani 。我该如何解决这个问题？

$(".list").on('click', function() {
  $('.list').removeClass("ani");
  if ($(this).hasClass('ani')) {
    $(this).toggleClass("ani");
  } else {
    $(this).addClass("ani");
  }
});

.list {
  height: 60px;
  width: 160px;
  background: yellow;
  margin: 4px;
  cursor: pointer;
}

.ani {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>

Answer 1

看来您使这项任务过于复杂化了。看一下下面的代码(仅发布 JS，因为 HTML 和 CSS 是相同的):

$(".list").on('click', function() {
  $(this).toggleClass("ani").siblings().removeClass("ani");
});

详细说明其作用:

1. 在单击的项目上使用 toggleClass 来添加删除该项目上的类项目
2. 获取单击项目的所有同级项并从中删除类

工作原理:

上面示例中的代码使用了一种称为方法链接的方法，您可以在同一个 jQuery 对象上执行多个方法。这是可能的，因为大多数 jQuery 方法在执行后返回一个 jQuery 对象。这使得在同一组元素上运行一系列操作变得更加容易和快捷。链接时需要注意的一件事是方法调用的顺序 - 更改使用的方法的顺序可能会导致不利影响(即:jQuery 中的大多数遍历方法返回一组不同的元素)。

fiddle :http://jsfiddle.net/darshanags/kz2wdo09/