使用jQuery .removeClass时无反应

Question

The .addClass works properly, however when I attempted to remove the same class on the same element when clicking the .close element, nothing happens. .addClass可以正常工作，但是当我单击.close元素时尝试删除同一元素上的同一类时，什么也没有发生。 I've save the original element in $currGallery . 我已经将原始元素保存在$currGallery 。 When I console.log this on click, it shows the proper element object. 当我单击console.log时，它显示了正确的元素对象。 Would appreciate any help! 将不胜感激！

    var $currGallery = null;

    var handler = function() {
      $currGallery = $(this);
      $(this).addClass("open-gallery");
      //$('.services > li').unbind( "click", handler );
    };

    $('.services > li').bind("click", handler);

    $('.close').click(function(){
      //console.log($currGallery);
      $currGallery.removeClass("open-gallery");
      //$('.services > li').bind( "click", handler );
    });

Answer 1

Most likely ( without seeing your html ) the .close element, is inside the .sevices > li element as well. .close元素很可能（ 没有看到您的html ）也位于.sevices > li元素内。 So when you click on the .close it correctly removes the class but the event also bubbles up to the .sevices > li which in turn re-adds the class. 因此，当您单击.close它会正确删除该类，但事件也会冒泡到.sevices > li ，这又会重新添加该类。

If that is the case then on the .close handler you need to stop the propagation so that it never reaches the li . 如果是这种情况，则需要在.close处理程序上停止传播，以使它永远不会到达li 。

$('.close').click(function(e){
  e.stopPropagation();

  $currGallery.removeClass("open-gallery");
});

Answer 2

based on my understanding of the issue you posted, I will suggest you use jquery toggleClass function. 根据对发布问题的理解，建议您使用jquery toggleClass函数。

below is a sample code, and a link to the documentation. 下面是一个示例代码，以及指向文档的链接。

http://api.jquery.com/toggleclass http://api.jquery.com/toggleclass

 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>toggleClass demo</title> <style> p { margin: 4px; font-size: 16px; font-weight: bolder; cursor: pointer; } .blue { color: blue; } .highlight { background: yellow; } </style> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <p class="blue">Click to toggle</p> <script> $( "p" ).click(function() { $( this ).toggleClass( "highlight" ); }); </script> </body> </html>

使用jQuery .removeClass时无反应

问题描述

2 个解决方案

解决方案1
1 已采纳 2018-06-06 16:12:53

解决方案2
1 2018-06-06 16:18:19

使用jQuery .removeClass时无反应

问题描述

2 个解决方案

解决方案1 1 已采纳 2018-06-06 16:12:53

解决方案2 1 2018-06-06 16:18:19

解决方案1
1 已采纳 2018-06-06 16:12:53

解决方案2
1 2018-06-06 16:18:19