jQuery中的addClass和removeClass - 不删除类

Question

我正在尝试做一些非常简单的事情.基本上我有一个可点击的div'热点',当你点击它填满屏幕并显示一些内容.我通过简单地改变div的类,删除'spot'并添加'grow'来实现这一点,并且有一些CSS动画来使它成长.这很好用.

问题是,在这个div中有一个close_button,目前只是文本.我希望这可以将类切换回来 - 即删除成长和读取的点.单击时不会执行此操作.我相信这是在DOM加载时没有这些类的元素,但我是jQuery的新手,不知道如何解决这个问题.

我认为这可能是一种更明智的做法,有人能指出我正确的方向吗？我会非常感激的.我尝试使用toggleClass而无济于事.

$( document ).ready(function() {      
    $(".clickable").click(function() {  
        $(this).addClass("grown");  
        $(this).removeClass("spot");
    });   

    $(".close_button").click(function() {  
        alert (this);
        $("#spot1").removeClass("grown");  
        $("#spot1").addClass("spot");
    });   
});

更新:

我现在正在使用此代码,

$( document ).ready(function() {   
    $(document).on("click", ".close_button", function () { 
        alert ("oi");
        $("#spot1").addClass("spot");
        $("#spot1").removeClass("grown");
    });  


    $(document).on("click", ".clickable", function () {
        if ($(this).hasClass("spot")){
            $(this).addClass("grown");
            $(this).removeClass("spot");
        }
    });
});

奇怪的是,close_button函数仍然不会添加'spot'或删除'grow'虽然它会添加任何其他类,它会删除其他类...我添加了if子句,因为我认为这两个函数都可能被触发时间,互相取消,但似乎没有任何区别

Answer 1

发生的事情是您的关闭按钮放在.clickablediv中,因此将在两个元素中触发click事件.

事件冒泡将使click事件从子节点传播到其父节点.因此,您的.close_button回调将首先执行,.clickable到达时,它将再次切换类.由于运行速度非常快,您无法注意到发生的两件事.

                    / \
--------------------| |-----------------
| .clickable        | |                |
|   ----------------| |-----------     |
|   | .close_button | |          |     |
|   ------------------------------     |
|             event bubbling           |
----------------------------------------

要防止事件到达.clickable,您需要将事件参数添加到回调函数,然后stopPropagation在其上调用方法.

$(".close_button").click(function (e) { 
    $("#spot1").addClass("spot");
    $("#spot1").removeClass("grown");
    e.stopPropagation();
});

小提琴:http://jsfiddle.net/u4GCk/1/

有关事件顺序的更多信息,请访问:http://www.quirksmode.org/js/events_order.html(这是我选择那种漂亮的ASCII艺术=]的地方)

Answer 2

该问题是由于事件冒泡引起的.要添加的代码的第一部分.grown工作正常.

单击链接时,第二部分"删除已成熟的类"不会像处理.close_button和.clickable执行处理程序那样正常工作.所以它删除并读取了grown类div.

您可以通过使用e.stopPropagation()内部.close_button单击处理程序来避免此事件冒泡.

演示: http ://jsfiddle.net/vL8DP/

完整代码

$(document).on('click', '.clickable', function () {
   $(this).addClass('grown').removeClass('spot');
}).on('click', '.close_button', function (e) {
   e.stopPropagation();
   $(this).closest('.clickable').removeClass('grown').addClass('spot');
});

Answer 3

每当我看到addClass,removeClass我想为什么不只是使用toggleClass.在这种情况下,我们可以删除.clickable类以避免事件冒泡,并避免在我们点击内部的所有内容上触发事件.clickable div.

$(document).on("click", ".close_button", function () { 
    $(this).closest(".grown").toggleClass("spot grown clickable");
});  

$(document).on("click", ".clickable", function () {
    $(this).toggleClass("spot grown clickable");
}); 

我还建议您.clickable divs使用父包装,而不是使用document.我不确定你是如何动态添加它们所以不想为你假设你的布局.

http://jsfiddle.net/bplumb/ECQg5/2/

快乐编码:)

Answer 4

我建议缓存不止一次使用的jQuery对象。例如：

    $(document).on("click", ".clickable", function () {
        $(this).addClass("grown");
        $(this).removeClass("spot");
    });

将会：

    var doc = $(document);
    doc.on('click', '.clickable', function(){
       var currentClickedObject = $(this);
       currentClickedObject.addClass('grown');
       currentClickedObject.removeClass('spot');
    });

它实际上更多的代码，但是它的速度更快，因为您不必“遍历”整个jQuery库即可获取$（this）对象。

Answer 5

使用.on()

\n\n

您需要事件委托，因为当 DOM 准备好时，这些类不会出现在 DOM 上。

\n\n

$(document).on("click", ".clickable", function () {\n    $(this).addClass("grown");\n    $(this).removeClass("spot");\n});\n$(document).on("click", ".close_button", function () {\xc2\xa0\xc2\xa0\n    $("#spot1").removeClass("grown");\n    $("#spot1").addClass("spot");\n});\xc2\xa0\xc2\xa0\n

\n