0

javascript のオン/オフを切り替えようとしていますが、問題があります。クラスの変更にもかかわらず、常に最初のクラスでクリックします。

私は常に同じ結果を持っています: on->on または off->off. Firebug をチェックインすると、HTML が正しく変更されます...

ここで私の簡略化されたコード:

$('.off').on('click', function(e) {
    e.stopPropagation();
    e.preventDefault();

    alert('off');

    $(this).removeClass('off');
    $(this).addClass('on');
});

$('.on').on('click', function(e) {
    e.stopPropagation();
    e.preventDefault();

    alert('on');

    $(this).removeClass('on');
    $(this).addClass('off');
});

誰か提案があれば、私はとても感謝しています!!

4

4 に答える 4

4

イベントハンドラーはページロードでバインドされるため、クラスを変更してもイベントハンドラーは変更されません。これは、イベントハンドラーがバインド時に存在していた要素にアタッチされるためです。それらを将来の要素にアタッチするには、つまりクラスを変更するときに、委任されたイベントハンドラーが必要になりますが、私の意見では、クラスを切り替えるか、フラグを使用する方が簡単です。

$('.off').on('click', function(e) {
    e.preventDefault();
    var state = $(this).is('.off') ? 'on' : 'off';

    alert(state);

    $(this).toggleClass('off on');
});

フィドル

混乱する可能性がありますが、.offクラスを削除しても、バインド時にクラスがあったため、イベントハンドラーは同じ要素にバインドされ.offます。

于 2013-02-24T14:44:33.403 に答える
2

で最初にバインドするとき、.offorは存在しません。イベント委譲を使用するか、別のクラスにバインドしてオン/オフ状態を維持するようにこれを書き直すことができます。両方の方法を紹介します。.on.on

委任

$(document).on('click', '.off', function(e) {
    $(this).removeClass('off').addClass('on');
}).on('click', '.on', function(e) {
    $(this).removeClass('on').addClass('off');
});

http://jsfiddle.net/ExplosionPIlls/2PHJg/

内部状態

$(".switch").on('click', function () {
    if ($(this).is('.off')) {
        $(this).removeClass('off').addClass('on');
    }
    else {
        $(this).removeClass('on').addClass('off');
    }
});

http://jsfiddle.net/ExplosionPIlls/2PHJg/1/

于 2013-02-24T14:47:29.493 に答える
1

この問題は、JavaScript コードの実行時に $('.on') と $('.off') が 1 回しか評価されないために発生します。

問題を解決するには、イベント委任を使用する必要があります。コードを次のように変更します。それが何を意味するのかを以下に説明します。

$('#container').on('click', '.off', function(e) {
    e.stopPropagation();
    e.preventDefault();

    alert('off');

    $(this).removeClass('off');
    $(this).addClass('on');
});

$('#container').on('click', '.on', function(e) {
    e.stopPropagation();
    e.preventDefault();

    alert('on');

    $(this).removeClass('on');
    $(this).addClass('off');
});

#container の代わりに、.on / .off 要素の親を選択するセレクターを使用します。on() 呼び出しの 2 番目のパラメーターでは、イベントをリッスンする要素を指定する必要があります。

これにより、要素のクラスが変更された場合でも、イベント ハンドラーが適切に実行されます。

于 2013-02-24T14:46:23.177 に答える
1

問題は、コードが最初に実行されたときにイベント ハンドラーがバインドされているため、クラスが変更されたときにイベント ハンドラーが再バインドされないことです。これを修正する 1 つの方法は、変更されないクラスを要素に割り当て、それをイベント ハンドラーに使用することです。

例：

$('.button').on('click', function(e) {
    e.stopPropagation();
    e.preventDefault();

    $(this).toggleClass('off on');
});

http://codepen.io/skimberk1/pen/GJhnaで実例を見ることができます。

于 2013-02-24T14:49:27.553 に答える