0

私はこの非常に単純な jQuery スクリプトを持っていますが、うまく動作しません。私は以前にこれとまったく同じことを問題なく行ったことがあるので、確かに何かが欠けています。

Codepen リンク: http://codepen.io/jimmykup/full/pjJhC

$("div.minimize").click(function() {

    alert("Changing to RED");
    $(this).removeClass('minimize');
    $(this).addClass('maximize');

});

$("div.maximized").click(function() {

    alert("Changing to BLUE");
    $(this).removeClass('maximize');
    $(this).addClass('minimize');

});

問題は、自分<div>のクラスが.maximizejQuery に変更されると、クラスがまだ変更されていないかのように実行し続けること.minimizeです。

4

3 に答える 3

2

イベントがバインドされたときにセレクターに一致した要素にのみイベントが登録されたため、コードはクラスの変更を認識しません。

コードが本当に単純な場合は、単一のハンドラー内でクラスをテストするだけの方がよいでしょう。イベントがページ上のすべてclickableにバインドされないように、追加のクラスを追加しました。 div

$('div.clickable').on('click', function() {
    var $this = $(this);
    if ($this.hasClass('minimize')) {
       $this.addClass('maximize').removeClass('minimize');
    } else {
       $this.addClass('minimize').removeClass('maximize');
    }
});

clickableクラスをdivに追加したくない場合はdiv.minimize,div.maximize、@Kevinの回答に従ってセレクターで使用してください。

于 2013-01-10T15:51:34.103 に答える
1

これは、クリック イベントをバインドするときに、その時点で div.maximize がないために発生します。

つまり、$("div.minimize").click() だけが適用され、まだ div にアタッチされています。

代わりに、イベントをドキュメントまたは div の親に添付します。

$(document).on("click", ".minimize", function() {

    alert("Changing to RED");
    $(this).removeClass('minimize');
    $(this).addClass('maximize');

});

$(document).on("click", ".maximized", function() {

    alert("Changing to BLUE");
    $(this).removeClass('maximize');
    $(this).addClass('minimize');

});

それはうまくいくはずです。アイデアがこれら 2 つのクラスを切り替えるだけの場合は、次のようにコードを単純化します。

$(document).on("click", ".minimize, .maximize", function() {
    $(this).toggleClass('minimize');
    $(this).toggleClass('maximize');
});
于 2013-01-10T15:56:24.563 に答える
1

要素のクラスを変更しても、バインドされているイベントは変更されません。ただし、委任されたイベントを使用すると、一致する子要素を探す親要素にイベントがバインドされるため、委任されたイベントを使用してこれを実現できます。

$(document).on("click","div.minimize",function() {

    alert("Changing to RED");
    $(this).removeClass('minimize').addClass('maximize');

});

$(document).on("click","div.maximized",function() {

    alert("Changing to BLUE");
    $(this).removeClass('maximize').addClass('minimize');

});

またはさらに良いことに、単一のイベント。

$("div.minimize,div.maximize").click(function(){
    if ($(this).is(".minimize")) {
        alert("Changing to RED");
        $(this).removeClass('minimize').addClass('maximize');
    }
    else {
        alert("Changing to BLUE");
        $(this).removeClass('maximize').addClass('minimize');
    }
});

またはそれ以上に、

$("div.minimize,div.maximize").click(function(){
    alert("Changing to " + $(this).is(".minimize") ? "RED" : "BLUE");
    $(this).toggleClass('maximize minimize');
});
于 2013-01-10T15:52:21.490 に答える