jQuery parent(); function removeClass(); 不工作(错误)

Question

我有一个投资组合,我列出了投资组合项目.我有课程,所以当你点击该项目时,它有效果.出于某种原因,当我单击减号按钮时,它不会删除"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"类.

Answer 1

当您单击minus它时,它将删除该类on.但是,同时,如同minus位于其中portfolio-item,它会触发其click事件并将此类应用回来.

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

根据文件, e.stopPropagation

防止事件冒泡DOM树,防止任何父处理程序被通知事件.

这是工作的JSFiddle演示.它看起来很糟糕,但演示了功能.