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 回答