Question

我有这个超级简单的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>的类被更改为.maximize，jQuery就会继续运行，好像该类仍然是.minimize。

Answer 1

您的代码未看到类更改，因为该事件仅在绑定事件时与选择器匹配的元素上注册。

如果你的代码非常简单，那么在单个处理程序中测试类会更好。我添加了一个额外的类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的答案。

Answer 2

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

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

Answer 3

这是因为绑定click事件时，此时没有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');
});

为什么我的jQuery脚本没有看到我改变了元素的类？

3 个答案: