0

以下にこのコードがあります。アプリを実行して「バー」をクリックすると、メッセージThe not 'current' div has been clickedが表示されます。次に、「foo」をクリックすると、メッセージは表示されません。current両者の間でクラスを交換したので、メッセージが表示されることを期待していましたdivs。

<div class="current">foo</div>
<div>bar</div>

$('document').ready(function(){
    $('div').not('.current').on('click', function(){
        alert("The not 'current' div has been clicked.")
        var aux = $(this);
        $('div').removeClass('current');
        aux.addClass('current');
    });
});
4

4 に答える 4

1

クリックイベントを「現在ではない」要素に追加するだけで、クラスを切り替えると、要素の1つにはまだクリックイベントがありません。代わりに、次のことができます。

$('document').ready(function(){
    $('div').on('click', function(){
        if ($(this).hasClass("current")){
            return;
        }

        alert("The not 'current' div has been clicked.")
        var aux = $(this);
        $('div').removeClass('current');
        aux.addClass('current');
    });
});
于 2013-05-10T11:37:39.777 に答える
0

DOM の準備が整ったら、 class を持たない div に対してのみクリック イベントを割り当てましたcurrent。したがって、コードは機能しません。クリック イベントをすべての div に割り当て、その中のクラスを次のように確認する必要があります。

$('div').on('click', function (e) {
    if (e.target.className === 'current') return;
    console.log("The not 'current' div has been clicked.")
    var $aux = $(this);
    $('div').removeClass('current');
    $aux.addClass('current');
});
于 2013-05-10T11:44:24.657 に答える
0

次のコードを使用します。

$('document').ready(function(){
    $('div').on('click', function(){
        if($(this).hasClass('current')) return;

        alert("The not 'current' div has been clicked.")
        var aux = $(this);
        $('div').removeClass('current');
        aux.addClass('current');
    });
});

コールバック内のクラスを確認してください ;)

jsfiddle はこちら: http://jsfiddle.net/5hFv4/

于 2013-05-10T11:37:57.357 に答える