在子点击时从父项中删除 class - jQuery

Question

我完全被这个问题困住了 (see jsfiddle here)。我有一个非常简单的设置，其中 onclick 添加了一个显示元素的 class。在这个元素中有一个关闭按钮，onclick 应该从父元素中删除 class。但这是行不通的。

我试过 removeAttr('class') 也失败了。查看 chrome 检查器，我可以看到 selector 是正确的并且针对父对象，但是 class 无法删除。

这是一个更大项目的一部分，所以我无法更改 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');
    });
});

Answer 1

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

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

Answer 2

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

demo

在子点击时从父项中删除 class - jQuery

Remove class from parent on child click - jQuery

html

javascript

css

jquery

onclick