Question

您能看一下这个演示，让我知道为什么我不能解决这个问题吗？

基本上我想做的是将.ani类添加到被单击的元素，并从所有 BUT 中删除.ani，我还需要删除{{1} }，再单击一次即可获得该元素。

您可以看到常规的添加和删除工作正常，但我无法删除现有元素上的.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;
}

Answer 1

看来您已经使这项任务复杂化了。看一下下面的代码（仅将JS发布为HTML和CSS相同）：

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

其功能细分：

在点击的项目上使用toggleClass，在项
获取所有被单击项的兄弟姐妹并从中删除该类

工作原理：

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

提琴：http://jsfiddle.net/darshanags/kz2wdo09/

Answer 2

选中此一项。只需更新onclick方法即可。所有其他代码是相同的。我发布了一个是单行代码，另一个是if-else代码，其中有注释。您可以使用哪种更适合您。您首先要删除代码中存在错误的ani类。

$(".list").on('click', function() {
  $(this).toggleClass("ani").siblings().removeClass("ani");
  /*if($(this).hasClass("ani")){
    $(".list").removeClass("ani");
  } else {
    $(".list").removeClass("ani");
    $(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 3

在此代码中：

.get

您要删除每个$(".list").on('click', function() { $('.list').removeClass("ani"); if ($(this).hasClass('ani')) { $(this).toggleClass("ani"); } else { $(this).addClass("ani"); } });元素的类，因此.list将始终为false（您刚刚删除了每个$(this).hasClass('ani')元素的ani类，（包括被点击的内容），因此行.list将始终被执行。

解决方案很简单。检查单击的元素是否具有$(this).addClass("ani")类，如果是，则将其删除，否则添加它：

ani

Answer 4

您想删除除单击元素之外的所有元素上的类ani。您可以使用not()

$(".list").on('click', function(evt) {
    $(".list").not($(evt.currentTarget)).removeClass("ani");
    $(evt.currentTarget).toggleClass("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>

第二次单击jQuery时无法删除类

4 个答案: