jQuery中的addClass和removeClass - 不删除类 [英] addClass and removeClass in jQuery - not removing class

问题描述

我正在努力做一些非常简单的事情。基本上我有一个可点击的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 ）; 
 $（＃spot1）。addClass（spot）; 
}）; 
}）; 
  

更新：

我正在使用代码现在，

  $（document）.ready（function（）{
 $（document）单击，.close_button，function（）{
 alert（oi）; 
 $（＃spot1）。addClass（spot）; 
 $ spot，removeClass（grown）; 
}）; 
 
 
 $（document）.on（click，.clickable，function（） 
 if（$（this）.hasClass（spot））{
 $（this）.addClass（grown）; 
 $（this）.removeClass（spot） ; 
} 
}）; 
}）; 
  

奇怪的是，close_button函数仍然不会添加'spot'或删除'grow'，尽管它会添加任何其他类，它会删除其他类...我添加了if子句，因为我认为也许两个功能都被同时触发，相互撤销，但似乎没有区别

解决方案

发生什么事情是，您的关闭按钮位于 .clickable div内，因此点击事件将在两个元素中触发。

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

  / \ 
 ---- ---------------- | | ----------------- 
 | .clickable | | | 
 | ---------------- | | ----------- | 
 | | .close_button | | | | 
 | ------------------------------ | 
 |事件冒泡| 
 ---------------------------------------- 
  

为防止您的事件达到 .clickable ，您需要添加event参数到你的回调函数，然后调用它的 stopPropagation 方法。

  $（。close_button）。click（function（e）{
 $（＃spot1）。addClass（spot）; 
 $（＃spot1）removeClass grow）; 
 e.stopPropagation（）; 
}）; 
  

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

有关事件顺序的更多信息： http://www.quirksmode.org/js/events_order.html （这是我选择那个漂亮的ASCII art =]）

I'm trying to do something very simple. Basically I have a clickable div 'hot spot', when you click that it fills the screen and displays some content. I achieved this by simply changing the class of div, removing 'spot' and adding 'grown' and there's a little CSS animation to make it grow. This works fine.

The problem is, within this div there is a close_button, which at the moment is just text. I want this to switch the classes back - i.e. remove grown and readd spot. It doesn't do this when clicked. I believe it's to do with the element not having those classes when the DOM loads, but I'm new to jQuery and don't know how to work around this.

I think there's probably a much more sensible way of doing it, could someone point me in the right direction? I'd be very grateful. I've tried using toggleClass instead to no avail.

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

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

UPDATE:

I am using this code now,

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

strangely the close_button function still won't add 'spot' or remove 'grown' though it will add any other classes and it will remove other classes... I added the if clause because I thought perhaps both function were being triggered at the same time, undoing each other, but it seems to make no difference

解决方案

What happens is that your close button is placed inside your .clickable div, so the click event will be triggered in both elements.

The event bubbling will make the click event propagate from the child nodes to their parents. So your .close_button callback will be executed first, and when .clickable is reached, it will toggle the classes again. As this run very fast you can't notice the two events happened.

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

To prevent your event from reaching .clickable, you need to add the event parameter to your callback function and then call the stopPropagation method on it.

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

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

More info about event order in general: http://www.quirksmode.org/js/events_order.html (that's where I picked that pretty ASCII art =])

这篇关于jQuery中的addClass和removeClass - 不删除类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！