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

更改元素的类不会更改绑定到它的事件。但是,您可以使用委托事件来完成此操作,因为委托事件将事件绑定到查找匹配子元素的父元素。

$(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 回答
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');

});

那应该行得通。如果这个想法只是在这两个类之间切换,您可以使用以下代码来简化代码:

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