2

こんにちは、デフォルトの class を持つ div がありますUnlocked。それをクリックすると、クラスを削除してクラスUnlockedに変更しlocked、もう一度クリックすると、古いUnlocked.

これは私のjsです

 $(document).ready(function() {
        console.log("Test");

        $(".Unlocked").click(function(){
            console.log("HI2");
            $("#LeftMenu").css('margin-left', '0');
             $("#LockLeftMenu").removeClass("Unlocked");
            $("#LockLeftMenu").addClass("locked");
             $("#lbl_lock").text("UnLock");


        });

  $(".locked").on("click", function (event) {
            console.log("HI");
            $("#lbl_lock").text("Lock");

            $("#LeftMenu").css('margin-left', '-260px');
            $("#LockLeftMenu").removeClass("locked");
            $("#LockLeftMenu").addClass("Unlocked");


        });

    });

これは、クリックする前に必要な私のhtmlです。

<div id="LeftMenu">
<div id="LockLeftMenu" class="Unlocked">
<label id="lbl_lock">Lock</label>
</div>

クリック後、

<div id="LeftMenu" style="margin-left: 0px;">
<div id="LockLeftMenu" class="locked">
<label id="lbl_lock">UnLock</label>
</div>

しかし、古い $(.Unlocked) 要素をクリックした後、console.log に表示されるのは HI2.HI2.HI2 だけです... $(.locked) の HI に到達できません。

4

6 に答える 6

2

試す

$(document).ready(function() {
    console.log("Test");

    $('#LockLeftMenu').click(function(){
        var $this = $(this).toggleClass('Unlocked locked');

        if($this.hasClass('Unlocked')){
            $("#LeftMenu").css('margin-left', '0');
            $("#lbl_lock").text("UnLock");
        } else {
            $("#lbl_lock").text("Lock");
            $("#LeftMenu").css('margin-left', '-260px');
        }
    });

});
于 2013-08-12T05:39:02.957 に答える
2

これは、無名関数がドキュメントの準備ができた時点で要素にバインドされているためです。要素にクラスを削除または追加しても、その要素の「クリック」イベントは変更されません。

このようなクラスを1つ作成する方がよいと思います： 

<div id="LockLeftMenu" class="Clickable Unlocked">

次にjavascriptで：

$(".Clickable").click(function(){
    if($(this).hasClass('Unlocked'))
    {
        console.log("HI2");
        $("#LeftMenu").css('margin-left', '0');
        $("#LockLeftMenu").removeClass("Unlocked");
        $("#LockLeftMenu").addClass("locked");
        $("#lbl_lock").text("UnLock");
    }
    else
    {
        console.log("HI");
        $("#lbl_lock").text("Lock");

        $("#LeftMenu").css('margin-left', '-260px');
        $("#LockLeftMenu").removeClass("locked");
        $("#LockLeftMenu").addClass("Unlocked");
    }
});
于 2013-08-12T05:44:03.467 に答える
1

このコードは、ページの読み込み時に実行されます。これは、ページの読み込み時に、クラスをUnlocked持つすべての要素にハンドラーが追加され、ページの読み込み時にクラスを持つ要素にハンドラーが追加されることを意味します。ただし、ページの読み込み時には、 classを持つ要素がないため、ハンドラーはどの要素にも追加されません。UnlockedLockedLocked Locked

他の応答で述べたように、単一のハンドラーを使用するか、jQuery .delegate() メソッドを使用して、問題を修正できます。

$(document).ready(function() {
    console.log("Test");

    $(document).delegate(".Unlocked", "click", function(){
        // Unlocked stuff there
    });

    $(document).delegate(".locked", "click", function (event) {
        // Locked stuff there
    });
});
于 2013-08-12T05:49:51.637 に答える
1

以下のコードを使用して実行できます。

$('#LockLeftMenu').live('click',function(){
    var $this = $(this).toggleClass('Unlocked locked');

    if($this.hasClass('Unlocked')){
        $("#LeftMenu").css('margin-left', '0');
        $("#lbl_lock").text("UnLock");
    } else {
        $("#lbl_lock").text("Lock");
        $("#LeftMenu").css('margin-left', '-260px');
    }
});

これですべてです。これがお役に立てば幸いです。

于 2013-08-12T05:47:31.910 に答える
1 
$(document).ready(function() {
        console.log("Test");

        $(".Unlocked").click(function(){
            if($('#LockLeftMenu').attr('class') === 'Unlocked'){
                 console.log("HI2");
                 $("#LeftMenu").css('margin-left', '0');
                 $("#LockLeftMenu").removeClass("Unlocked");
                 $("#LockLeftMenu").addClass("locked");
                 $("#lbl_lock").text("UnLock");
             }
             else{
                  console.log("HI");
                  $("#lbl_lock").text("Lock"); 
                  $("#LeftMenu").css('margin-left', '-260px');
                  $("#LockLeftMenu").removeClass("locked");
                  $("#LockLeftMenu").addClass("Unlocked");

             }

        });
于 2013-08-12T05:47:58.833 に答える