如何在主要父母上删除/添加班级

Question

您好，请看下面的代码：

我的目标是，如果我单击第一个按钮，它将在 main parent 上添加类，如果我再次单击它，它将删除类。但是，如果我单击另一个按钮，第一个main parent 的类将被删除，并将添加到第二个main parent。任何人都可以帮助我如何做到这一点？

$(".main-btn").on("click", function() {
  $(this).closest(".main").addClass("addClass");
});

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

.main.addClass {
  background: green;
}

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

Answer 1

我们可以通过以下功能来做到这一点：

1. siblings() 获取兄弟元素并删除 addClass

2. toggle() 切换当前点击元素的类

   $(".main-btn").on("click", function() {
     $(this).closest(".main").siblings().removeClass("addClass");
     $(this).closest(".main").toggleClass("addClass");
   });

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

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

Answer 2

我试过使用这个 $(this).closest(".main").removeClass("addClass");还是没用。