2

你好，所以我有一个带有默认类的 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

这是因为匿名函数已绑定到文档准备就绪的元素。为元素删除或添加类不会更改该元素上的“单击”事件。

我认为最好创建一个这样的类： 

<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

你可以使用下面的代码来做到这一点：

$('#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 回答
1

此代码在页面加载时运行。这意味着在页面加载时，Unlocked处理程序被添加到所有具有类Unlocked的元素中，并且处理程序被添加到在页面加载Locked时具有类的元素中。但是在页面加载时，没有带有 class 的元素，因此您的处理程序不会添加到任何元素中。Locked 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

使用 jQuery 的delegate函数来完成这项工作：

$(document).delegate('.Unlocked', 'click', function () { ... });
$(document).delegate('.locked', 'click', function () { ... });

这是一个Fiddle.

顺便说一句，如果您想知道的话，您的标签会因为您分配给它的负左边距而消失。

于 2013-08-12T05:56:16.367 回答