jQuery parent（）; function removeClass（）;不工作（bug） [英] jQuery parent(); function removeClass(); not working (bug)

问题描述

我有一个投资组合项目。
我有类，所以当你点击项目，它有一个效果。
由于某些原因，当我点击减号按钮，它不会删除类'on'。

这里是jQuery：

  $（'。portfolio-item'）click（function（）{
 $（this）.addClass（'on' ）; 
}）; 
 $（'。minus'）。click（function（）{
 $（this）.closest（'。portfolio-item'）。removeClass（'on'）; 
} ; 
  

这里是设置的元素：

 < div class =portfolio-itemstyle =margin-top：5px;> 
< div class =overlay> 
< h1> LOW POLY ISLANDS< / h1> 
< h3> LOW POLY< / h3> 
< / div> 
< div class =about> 
< h1> LOW POLY ISLANDS< / h1> 
< h3> LOW POLY< / h3> 
 
< div class =descrip> 
这是一个低聚岛在Blender和在Photoshop中编辑。 
< / div> 
 
< div class =minus>< / div> 
< div class =plus>< / div> 
< / div> 
< img src =https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/57909c29180525.55fc4b1875c26.pngwidth =100％/> 
< / div> 
 

如何解决此问题 - 我希望能够在点击时删除类'on'

解决方案

当您点击减号 上的类。但是，同时 minus 位于 portfolio-item 中，它会触发其

您可以使用 e.stopPropagation（）禁用此行为。

根据文档， e .stopPropagation

防止事件冒泡DOM树，防止

这里是工作的 JSFiddle演示。它看起来很可怕，但演示的功能。

I have a portfolio where I list portfolio items. I have classes so when you click the item, it has an effect. For some reason, when I click the minus button, it doesn't remove the class 'on'.

Here is the jQuery:

  $('.portfolio-item').click(function() {
    $(this).addClass('on');
  });
  $('.minus').click(function() {
    $(this).closest('.portfolio-item').removeClass('on');
  });

and here is the element set up:

<div class="portfolio-item" style="margin-top: 5px; ">
   <div class="overlay">
      <h1>LOW POLY ISLANDS</h1>
      <h3>LOW POLY</h3>
   </div>
   <div class="about">
      <h1>LOW POLY ISLANDS</h1>
      <h3>LOW POLY</h3>

      <div class="descrip">
         This is a low poly island make in Blender and edited in Photoshop.
      </div>

      <div class="minus"></div>
      <div class="plus"></div>
    </div>
    <img src="https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/57909c29180525.55fc4b1875c26.png" width="100%" />
</div>

How do I fix this - I want to be able to remove the class 'on' when I click on 'minus'.

解决方案

When you click your minus it removes the class on. However, at the same time, as minus is located within portfolio-item, it triggers its click event and applies this class back.

You can use e.stopPropagation() to disable this behaviour.

According to documentation, e.stopPropagation

prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

Here is the working JSFiddle demo. It looks awful, but demonstrates the functionality.

这篇关于jQuery parent（）; function removeClass（）;不工作（bug）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！