jQuery-从所有div中删除类，但我单击的div除外

我有一些代码在工作，当你点击一个样例包装器div时，它可以打开和关闭这个类

然而，我只希望这些div中的一个一次拥有活动类。现在我可以全部点击它们，它们都会有活动类。我不知道如何从所有其他div中删除这个类，除了我刚才单击的那个div

我尝试使用.parent，但似乎不起作用/我认为我没有正确使用它

HTML

JS

简单地说，从所有元素中删除活动类，然后将活动类添加到单击的元素中

$(document).ready(function(){
    $(".variation_form_section .select div").click(function() { 
      $('.variation_form_section .select div').removeClass('active');
      $(this).addClass('active');
    }); 
});

演示：

您可以这样使用：

$(".variation_form_section .select div").click(function() { 
  $(".variation_form_section .select div").not($(this)).removeClass('active');
});

---

你可以试试。兄弟姐妹

---

演示：

如果要切换div是否已处于活动状态，只需在清除所有活动之前检查它即可。之后，如果单击的div最初不是活动的，则仅添加活动状态

---

为什么每个循环？这段代码将在最后一个元素设置为活动。谢谢@Mateusz Nowak，但这也去掉了切换功能。如果我单击一个已经处于活动状态的div，我仍然希望它删除“active”。我尝试添加if语句，但没有成功：我不明白您试图实现什么。您想创建切换效果，还是只通过检查当前状态来实现？是否同时使用@MateuszNowak来创建切换效果？

$(document).ready(function(){
    $(".variation_form_section .select div").click(function() { 
      $('.variation_form_section .select div').removeClass('active');
      $(this).addClass('active');
    }); 
});

$(".variation_form_section .select div").click(function() { 
  $(".variation_form_section .select div").not($(this)).removeClass('active');
});

<script>
$(document).ready(function(){
     $(".swatch-wrapper").on('click',function() { 
     $(".swatch-wrapper").removeClass('active');
      $(this).addClass('active');
    }); 
});
</script>

$(document).on('ready', function(){
    $(".variation_form_section .select div").on('click', function() { 
        $(this).addClass('active').siblings().removeClass('active');
    }); 
});

$(document).ready(function(){
    $(".variation_form_section .select div").click(function() {
      var isActive = ($(this).hasClass('active')) ? true : false; // checks if it is already active
      console.log("isActive: "+isActive);
      $('.variation_form_section .select div').removeClass('active');
      if(!isActive) $(this).addClass('active'); // set active only if it was not active
    }); 
});