Question

我正在尝试使用按钮（.org）单击添加和删除一个类（sameCols）到div（col2set）。 div col2set是第一个div。按钮（.org）放在div＆＃39; col2set＆＃39;在多个div之后。如果我只使用添加部分代码，则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/

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的任何元素并且删除类sameCols时，

第二个事件会触发来自col2set班的第一位家长。

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

两个事件都会触发。

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

那么如何解决这个问题？很容易，只需使用toggleClass()函数。 以下是一个工作示例

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您的点击事件重叠，您应该这样做

$(document).ready(function () {

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

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


 });

Answer 3

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

Answer 4

从.sameCols移除$(document).on("click", ".sameCols .org", function () 应该就像

$(document).ready(function () {

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

 });

Answer 5

你也可以在没有jQuery的情况下完全做到这一点：

const toggleClassName = "example"

document.querySelectorAll(".org").forEach(el => {
  window.addEventListener(el, () => {
    const parent = el.parentElement;
    if (!parent) return;
    parent.classList.includes(toggleClassName) ? 
      parent.classList.remove(toggleClassName) : 
      parent.classList.add(toggleClassName);
  })
})

如果你真的想使用jQuery，你至少可以将事件处理程序的数量减少到一个，这样就可以封装你的逻辑，而不是分成两个独立的闭包：

$('.parentClass').on('click', '.org', function(){
  $(this).parent().toggleClass('example');
});

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

5 个答案: