如何为main父元素添加/移除class并实现按钮切换效果

你可以通过以下逻辑实现需求：点击自身按钮时切换对应.main的类，点击其他按钮时先清空所有激活状态，再给当前目标添加类。

完整代码实现 #

JavaScript

$(".main-btn").on("click", function() {
  const $currentMain = $(this).closest(".main");
  // 判断当前main是否已激活
  if ($currentMain.hasClass("addClass")) {
    $currentMain.removeClass("addClass");
  } else {
    // 移除所有main的激活类
    $(".main").removeClass("addClass");
    // 给当前main添加激活类
    $currentMain.addClass("addClass");
  }
});

CSS

.main {
  background: yellow;
  margin-bottom: 3px;
  height: 50px;
}

.main.addClass {
  background: green;
}

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
  <div class="main-btn">Button</div>
  <div class="main-wrapper"></div>
  <div class="main-wrapper"></div>
  <div class="main-wrapper"></div>
</div>

<div class="main">
  <div class="main-btn">Button</div>
</div>

<div class="main">
  <div class="main-btn">Button</div>
</div>

逻辑说明 #

1. 定位目标元素：通过closest(".main")找到点击按钮对应的父级容器
2. 切换自身状态：如果当前容器已经有addClass，就移除该类，实现点击切换
3. 切换其他元素状态：如果当前容器未激活，先清空所有.main的addClass，再给当前容器添加类，保证同一时间只有一个激活的.main

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