3

以下のピースコードを見てください。

$(document).ready(function() { 
    $('a.upvote-off').click(function() {
        $(this).removeClass('upvote-off').addClass('upvote-on');
    });
    $('a.upvote-on').click(function() {
        $(this).removeClass('upvote-on').addClass('upvote-off');
    });
});

upvote-offこれは、アンカー タグのクラスを削除してから に置き換える単純な jQuery トグル関数upvote-onです。同様に、コードの 2 番目の部分は、同じアイコンが再度クリックされると、最初のコードを逆にします。アンカー タグのデフォルト値は ですupvote-off。

関数の最初の部分が実行されます。

$('a.upvote-off').click(function() {
    $(this).removeClass('upvote-off').addClass('upvote-on');
});

ただし、2番目は機能しません。

$('a.upvote-on').click(function() {
    $(this).removeClass('upvote-on').addClass('upvote-off');
});

それでも、最初の部分をコメントアウトすると、2 番目の部分が機能します。どうしてこれなの？

.toggleClass()後でそれぞれに追加したい、より複雑な機能がいくつかあるため、使用していないことに注意してください。

4

1 に答える 1

8

問題は、ページが最初に読み込まれたときに、指定されたクラスを持つ要素にのみハンドラーをバインドしていることです。要素のクラスが変更された場合、バインディングは自動的には追従しません。

これを解決するには、委任を使用し.on()ます。

$(document).ready(function() { 
    $(document).on('click', 'a.upvote-off', function() {
        $(this).removeClass('upvote-off').addClass('upvote-on');
    });
    $(document).on('click', 'a.upvote-on', function() {
        $(this).removeClass('upvote-on').addClass('upvote-off');
    });
});

すべての賛成票要素を囲む小さな DIV がある場合は、documentその ID に置き換えて、このオーバーヘッドを最小限に抑えます。

于 2013-08-16T00:44:21.493 に答える