jquery - jQuery 中的 addClass 和 removeClass - 不删除类

Question

我正在尝试做一些非常简单的事情。基本上我有一个可点击的 div“热点”，当你点击它时它会填充屏幕并显示一些内容。我通过简单地更改 div 的类、删除“spot”并添加“grown”来实现此目的，并且有一些 CSS 动画可以使其生长。这很好用。

问题是，在这个 div 中有一个 close_button，目前它只是文本。我希望这可以将类(class)切换回来 - 即删除增长和读取点。单击时不会执行此操作。我相信这与 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”或删除“grown”，尽管它会添加任何其他类并且会删除其他类...我添加了if子句，因为我认为可能这两个函数都被触发了同时，互相抵消，但似乎没有什么区别

Answer 1

发生的情况是，您的关闭按钮被放置在 .clickable div 内，因此两个元素中都会触发 click 事件。

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

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

要防止您的事件到达 .clickable，您需要将事件参数添加到回调函数中，然后对其调用 stopPropagation 方法。

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

fiddle :http://jsfiddle.net/u4GCk/1/

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