0

私は 2 つの jQuery 関数を作成しました。簡略化されたバージョンは次のように実行されます。

$('button.class').not('.selected').on('click', function() {
    console.log('not selected');
    console.log($(this));
    $(this).addClass('selected');
}

$('button.class.selected').on('click', function() {
     console.log('selected');
     console.log($(this));
     $(this).removeClass('selected');
}

ボタンをクリックすると、常にコンソールに次のように記録されます。

not selected
[<button class="someClass1 someClass2 selected">Text</button>]

Web インスペクターは、ボタンをクリックする前にこれを表示します:

<button class="someClass1 someClass2">Text</button>

そしてこれをクリックした後：

<button class="someClass1 someClass2 selected">Text</button>

もう一度クリックしても何も変わりません。

への切り替えはオンとオフの切り替えaddClass()にtoggleClass()成功し'selected'ますが、それでも常にログnot selectedに記録されます。これは、セレクターで何かが起こっていることを示唆しています。明らかに要素'selected'に関連付けられたクラスの 1 つであっても、最初の関数が常に呼び出されるのはなぜですか?button

'selected'いくつかのソリューションをテストしているときに、 のクラスとしてハード コーディングbuttonすると逆の問題が発生することに気付きましたtoggleClass()。jQueryを介して追加されたクラスはクラスとして「カウント」されませんか?

4

2 に答える 2

3

CSSセレクターは、実行時に評価されます。ページの読み込み時に一致する要素があるとは思わない$('button.class.selected')ので、2番目のハンドラーは何にもバインドされないため、実行されません。実行する必要があるのは、イベントなどのベースセレクターにイベントをアタッチし$('button.class')、イベントが発生したときにフィルタリングを実行することです。

$("button.class").on("click", function()
{
    if ($(this).is(".selected"))
    {
        console.log('selected');
        console.log($(this));
        $(this).removeClass('selected');
    }
    else
    {
        console.log('not selected');
        console.log($(this));
        $(this).addClass('selected');
    }
});

どちらのバージョンも機能しますが、実際に何をしようとしているのかによっては、一方が他方よりも適切な場合があります。

あなたがしようとしているのが.selectedボタンクリックで追加/削除することだけであるなら、このはるかに単純なバージョンが仕事をします

$("button.class").on("click", function() { $(this).toggleClass("selected"); });
于 2012-06-12T04:34:48.587 に答える
0

変更してみてください：

$('button.class').not('.selected')

に：

$('button').not('.selected')

と ：

$('button.class.selected')

に：

$('button.selected')
于 2012-06-12T04:28:52.873 に答える