jquery - :not(.active) 选择器

Question

我有一个简单的 CSS :not 选择器：

$('.UISelect.popover:not(.active)').click(function () {

    $(this).toggleClass('active');

});

单击将类 .active 添加到 .UISelect.popover：

<a class="UISelect popover active">jow</a>

:not(.active) 选择器应防止在第二次单击时删除 .active。

---

但是，问题在于它会在每次点击时切换 .active 类。我究竟做错了什么？

Answer 1

发生这种情况是因为在 dom 元素中永远设置了 click 事件。

这应该解决它：

$('.UISelect.popover').click(function () {
    $(this).toggleClass('active', !$(this).is('.active'));
});

当您声明事件时，它们将绑定到节点。当点击实际触发时，与您对它们的任何类无关。您唯一的解决方案是在点击触发时对其进行验证。

幸运的是，它toggleClass接受了第二个参数（真/假），所以你实际上不需要if在它周围加上一个。有了true它会添加类，false它会删除它。

Answer 2

一个简单的方法是只添加类，不管它是否已经有它。您不需要在添加之前检查它是否已经具有该类，jQuery 会为您检查唯一性。

$('.UISelect.popover').click(function () {
    $(this).addClass('active');
});