jQuery父（）；函数删除类（）；不工作（错误）答案

【问题标题】：jQuery parent(); function removeClass(); not working (bug)jQuery父（）；函数删除类（）；不工作（错误）
【发布时间】：2016-02-18 09:03:25
【问题描述】：

我有一个投资组合，我在其中列出投资组合项目。我有课程，所以当您单击该项目时，它会产生效果。出于某种原因，当我单击减号按钮时，它不会删除“on”类。

这里是 jQuery：

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

这是设置的元素：

<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>

我该如何解决这个问题 - 我希望能够在单击“减号”时删除“on”类。

【问题讨论】：

具有minus 类的元素是否是动态添加的……也许是通过单击具有plus 类的元素？如果是这样，请参阅stackoverflow.com/questions/203198/…
没有减号类是用css制作的，我手动为其插入元素。
“我为它手动插入元素”是什么意思？您是否在页面加载后添加具有minus 类的元素？
你能在 JSFiddle 重现这个问题吗？
使用event.stopPropagation()

标签： javascript jquery class parent

【解决方案1】：

当您单击 minus 时，它会删除类 on。但同时，由于minus 位于portfolio-item 内，它会触发其click 事件并将此类应用回来。

您可以使用e.stopPropagation() 禁用此行为。

根据文档，e.stopPropagation

防止事件在 DOM 树中冒泡，防止任何父处理程序收到事件通知。

这是工作的JSFiddle demo。它看起来很糟糕，但演示了功能。

【讨论】：

【解决方案2】：

你需要使用 e.stopPropagation()

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

DEMO

【讨论】：