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

Question

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

$(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/

标签： javascriptjquery

Answer 1

让我们看看你的代码

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

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

您在这里有两个click必须记录的事件。

当您event.taregt是具有类的任何元素并将类org添加sameCols到具有类的第一个父级时，将触发第一个事件col2set

当您event.target是任何具有类的元素时，第二个事件org会触发，该元素在具有类的元素中并从具有类的第一个父级sameCols中删除类。sameColscol2set

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

两个事件都会触发。

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

那么如何解决这个问题呢？很容易，只需使用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>