基本上我想要做的是将 .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>
最佳答案
看来您使这项任务过于复杂化了。看一下下面的代码(仅发布 JS,因为 HTML 和 CSS 是相同的):
$(".list").on('click', function() {
$(this).toggleClass("ani").siblings().removeClass("ani");
});
详细说明其作用:
- 在单击的项目上使用
toggleClass
来添加删除该项目上的类 项目 - 获取单击项目的所有同级项并从中删除类
工作原理:
上面示例中的代码使用了一种称为方法链接的方法,您可以在同一个 jQuery 对象上执行多个方法。这是可能的,因为大多数 jQuery 方法在执行后返回一个 jQuery 对象。这使得在同一组元素上运行一系列操作变得更加容易和快捷。链接时需要注意的一件事是方法调用的顺序 - 更改使用的方法的顺序可能会导致不利影响(即:jQuery 中的大多数遍历方法返回一组不同的元素)。
关于javascript - 如何在 jQuery 中第二次单击时删除类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51810369/