如何使用jQuery动态添加类，解决toggleClass作用于所有同类元素的问题

大家好，希望大家能帮我解决这个问题。我的需求是点击第一个按钮时，仅给第一个.main-div添加类，但目前使用toggleClass方法时，第二个div也会被添加上类，请问该如何正确实现该功能？

原有代码如下：

JS代码

$(".btn").on("click", function(){
    $(".main-div").toggleClass("active");
});

CSS代码

.main-div.active {
  background: yellow;
}

HTML代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="one">
  <div class="btn">ClickMe1</div>

<div class="main-div">Div1</div>
</div>

<div class="one">
  <div class="btn">ClickMe2</div>

<div class="main-div">Div2</div>
</div>

问题原因 #

你当前代码中使用的$(".main-div")是全局选择器，会匹配页面中所有符合类名的元素，所以只要触发点击事件，所有.main-div都会执行类切换操作。

解决方案 #

修改JS代码，基于当前点击的按钮定位对应的目标元素即可：

$(".btn").on("click", function(){
    // 写法1：直接取当前按钮的父容器查找目标元素
    $(this).parent().find(".main-div").toggleClass("active");
    
    // 写法2：更稳定的closest写法，避免后续DOM结构调整导致选择逻辑失效
    // $(this).closest(".one").find(".main-div").toggleClass("active");
});

实现逻辑 #

• $(this)指向当前触发点击事件的按钮元素
• parent()/closest(".one")向上获取按钮所属的外层容器
• find(".main-div")仅在当前容器内部查找目标元素，不会命中其他容器下的同类名元素

修改后即可实现点击对应按钮，仅切换对应容器内div样式的需求。

内容的提问来源于stack exchange，提问作者CoreTM