javascript - toggleClass Jquery 不适用于子元素到父元素

Question

已关闭。此问题需要 debugging details 。目前不接受答案。

---

编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem 。这将有助于其他人回答问题。

已关闭 5 年前。

Improve this question

我正在尝试通过单击按钮(.org)向 div(col2set)添加和删除一个类(sameCols)。div col2set 是第一个 div。按钮(.org)放置在多个 div 之后的 div'col2set' 内。如果我只使用添加部分代码，那么 addclass 就可以工作。当我使用删除部分代码时，两者(添加/删除)都不起作用。切换类也不起作用。请帮忙。

$(document).ready(function () {

    //add
    $(document).on("click", ".org", function () {
        $(this).closest(".col2set").addClass("sameCols");
    });

    //remove
    $(document).on("click", ".sameCols .org", function () {
        $(this).closest(".col2set").removeClass("sameCols");
    });


 });



<section class="data-block col2set">
  <div class="ls">
    <div class="box"  >
      <div class="sm-head">

        <div class="pull-right">
          <label class="switch org">
            <input type="checkbox">
            <span class="slider round"></span> </label>
          <h5>VIEW ORGINAL CLAIMS</h5>
        </div>
      </div>
    </div>
  </div>
</section>

http://jsfiddle.net/XNkDx/7880/

Answer 1

让我们看一下您的代码

$(document).on("click", ".org", function () {
  $(this).closest(".col2set").addClass("sameCols");
});

$(document).on("click", ".sameCols .org", function () {
  $(this).closest(".col2set").removeClass("sameCols");
});

这里有两个绑定(bind)到文档的click事件。

第一个事件在您的 event.taregt 是任何具有 org 类的元素并将 sameCols 类添加到第一个具有类 col2set

的父级

第二个事件在您的 event.target 是类 org 的任何元素且位于类 sameCols< 的元素中时触发 并使用 col2set 类从第一个父级中删除类 sameCols 。

那么当您点击 .sameCols .org 元素时会发生什么？

两个事件都会触发。

为什么？为什么不呢？首先在任何具有 org 类的元素上激活，因此它会被触发。第二个在 .sameCols 元素内具有类 org 的任何元素上激活，因此它也会触发。

那么如何解决这个问题？很简单，只需使用 toggleClass() 函数即可。 这是一个工作示例

$(document).on("click", ".org", function() {
  $(this).closest(".col2set").toggleClass("sameCols");
});

.col2set {
  background: #EEE;
  padding: 5px 8px;
}

.col2set.sameCols {
  background: #ADA;
}

.org {
  cursor: pointer;
  background: #DDD;
  padding: 5px 8px;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="col2set">
  Here is some text.
  <div class="org">Click me</div>
</div>
<div class="col2set">
  Here is some text.
  <div class="org">Click me</div>
</div>
<div class="col2set">
  Here is some text.
  <div class="org">Click me</div>
</div>