jquery 如何使用$this添加/删除类

dgjrabp2  于 2022-12-18  发布在  jQuery
关注(0)|答案(1)|浏览(185)

请参阅下面的代码

$(".nwe-cl-icontext").click(function () {
  $(this).parent().toggleClass("nwe-active");
 //  $(this).removeClass("nwe-active");
})
.nwe-cl-c.nwe-active {
background: red;
}

.nwe-cl-c {
background: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nwe-g-m">
    <div class="nwe-cl-c nwe-active">
        <div class="nwe-cl-icon-m is"></div>
        <div class="nwe-cl-icontext">btn3</div>
    </div>

    <div class="nwe-cl-c">
        <div class="nwe-cl-icon-m is"></div>
        <div class="nwe-cl-icontext">btn2</div>
    </div>

    <div class="nwe-cl-c">
        <div class="nwe-cl-icon-m is"></div>
        <div class="nwe-cl-icontext">btn3</div>
    </div>
</div>

有谁能帮我完成这个任务吗?目前,通过使用toggleClass,我可以添加/删除类。但我的目标是当我点击第二个按钮时,nwe-class应该添加到第二个父类中,与第三个父类相同,依此类推。

gzszwxb4

gzszwxb41#

因此,选择带有类的元素,确保它不是您单击的那个元素,然后删除该类。

$(".nwe-cl-icontext").click(function() {
  const elem = $(this).parent();
  elem.toggleClass("nwe-active");
  $('.nwe-active').not(elem).removeClass("nwe-active");
})
.nwe-cl-c.nwe-active {
  background: red;
}

.nwe-cl-c {
  background: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nwe-g-m">
  <div class="nwe-cl-c nwe-active">
    <div class="nwe-cl-icon-m is"></div>
    <div class="nwe-cl-icontext">btn3</div>
  </div>

  <div class="nwe-cl-c">
    <div class="nwe-cl-icon-m is"></div>
    <div class="nwe-cl-icontext">btn2</div>
  </div>

  <div class="nwe-cl-c">
    <div class="nwe-cl-icon-m is"></div>
    <div class="nwe-cl-icontext">btn3</div>
  </div>
</div>

相关问题