如何点击按钮仅为其所在父级内的对应.main-div添加active类

问题原因 #

你当前代码直接通过$(".main-div")选中了页面内所有该类名元素，所以每次点击都会统一操作所有目标元素，无法定位到当前按钮对应的容器内的元素。

修复后的代码 #

替换你原来的JS逻辑即可：

$(".btn").on("click", function () {
  // 先清除所有.main-div的active状态
  $(".main-div").removeClass("active");
  // 定位到当前点击按钮所属的父容器，选中对应.main-div添加active
  $(this).closest('.one').find('.main-div').addClass('active');
})

逻辑说明 #

1. 先全局移除所有.main-div的active类，确保同一时间只有一个元素处于激活状态
2. 通过$(this)获取当前被点击的按钮实例，使用closest('.one')向上查找最近的父级容器，再用find('.main-div')选中该容器内的目标元素单独添加类，不会影响其他容器的元素。

可选扩展（支持点击当前按钮取消激活） #

如果需要点击已经激活的按钮可以取消高亮，可以用以下逻辑：

$(".btn").on("click", function () {
  const $currentMain = $(this).closest('.one').find('.main-div');
  // 先移除除了当前目标之外的所有active类
  $(".main-div").not($currentMain).removeClass("active");
  // 切换当前目标的激活状态
  $currentMain.toggleClass("active");
})

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