在子级单击-jQuery时从父级移除类

Remove class from parent on child click - jQuery

本文关键字：单击 -jQuery      更新时间：2023-09-26

我完全陷入了这个问题（请参阅这里的jsfiddle）。我有一个非常简单的设置，其中onclick添加了一个显示元素的类。在这个元素中有一个关闭按钮，onclick应该为它从父级中删除类。但这是行不通的。

我试过removeAttr('class')，但也失败了。在chrome检查器中，我可以看到selector是正确的，并且是针对父级的，但类不能被删除。

这是一个更大项目的一部分，所以我不能更改html结构。但是，欢迎任何关于如何在jQuery中做到这一点的建议。

HTML:

<div class="print-wrap">
    <ul>
        <li class="settings-tab">+</i>
            <div class="settings-wrap">
                <div class="iphone-close">x</div>
                <div class="content"></div>
            </div>
        </li>
        <li class="img">
            <img src="http://placehold.it/250x166">
        </li>
    </ul>
</div>

jQuery:

jQuery(function(){
    jQuery('.settings-tab').click(function(){
        var $this = jQuery(this);
        $this.addClass('settings-out');
    });
    jQuery('.settings-wrap .iphone-close').click(function(e){
        var $this = jQuery(this);
        var $parent = $this.parent('.settings-wrap').parent('.settings-tab');
        $parent.removeClass('settings-out');
    });
});

在关闭按钮的事件处理程序中使用event.stopPropagation。事件被冒泡到父.settings-tab，并执行的处理程序，这将再次添加类。

更新的Fiddle

jQuery(function() {
  //settings tab:
  jQuery('.settings-tab').click(function() {
    jQuery(this).addClass('settings-out');
  });
  //Settings tab close
  jQuery('.settings-wrap .iphone-close').click(function(e) {
    jQuery(this).closest('.settings-out').removeClass('settings-out');
    e.stopPropagation();
  });
});
.print-wrap {
  width: 250px;
  height: 250px;
  overflow: hidden;
  position: relative;
  display: block;
  margin: 0 auto;
  margin-bottom: 20px;
  background-color: #D6A0A0;
}
.print-wrap ul {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
  position: relative;
  left: 0;
}
.settings-tab {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 0;
  right: 0;
  text-align: center;
  background: #f5d43f;
  transition: all .3s ease-in-out;
  transition-delay: .25s;
  z-index: 4;
  cursor: pointer;
}
.settings-tab .settings-wrap {
  width: 250px;
  right: -250px;
  height: 250px;
  background: lightblue;
  position: absolute;
  top: 0;
}
.settings-out {
  right: 250px;
}
.iphone-close {
  background: pink;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="print-wrap">
  <ul>
    <li class="settings-tab">+</i>
      <div class="settings-wrap">
        <div class="iphone-close">x</div>
        <div class="content"></div>
      </div>
    </li>
    <li class="img">
      <img src="http://placehold.it/250x166">
    </li>
  </ul>
</div>

jQuery(document).on('click','.settings-wrap .iphone-close',function(e){
         var $this = jQuery(this);
        var $parent = $this.parent('.settings-wrap').parent('.settings-tab');
        $parent.removeClass('settings-out');
    });
});

尝试更改jQuery(document).on('click','.settings-wrap .iphone-close',function(e){

演示

相关文章：