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) セレクターは、2 回目のクリックで .active が削除されないようにする必要があります。

ただし、問題は、クリックするたびに .active クラスを切り替えることです。私は何を間違っていますか？

score 3 · Accepted Answer

これは、クリックイベントが dom 要素で永続的に設定されているために発生します。

これで修正されるはずです：

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

イベントを宣言すると、それらはノードにバインドされます。クリックが実際にトリガーされたときに、それらにあるクラスに関係なく。唯一の解決策は、クリックがトリガーされたときにそれを確認することです。

幸いなことに、toggleClassは 2 番目の引数 (true/false) を受け入れるため、実際にで囲む必要はありませんif。trueクラスを追加すると、クラスがfalse削除されます。

score 1 · Accepted Answer

簡単な方法は、既にクラスがあるかどうかに関係なく、クラスを追加することです。追加する前にクラスが既にあるかどうかを確認する必要はありません。jQuery が一意性をチェックします。

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

2 に答える 2