jQuery - 从我点击的所有div中删除类

Question

我有一些代码工作,当你点击swatch-wrapper div时,可以打开和关闭类"active".

但是我只想让其中一个 div 一次拥有活动课程.现在我可以点击它们全部,它们都会有活动的类.我不知道如何从所有其他div中删除该类,除了我刚刚点击的那个.

我试图使用.parent(),但它似乎没有工作/我不认为我正确使用它.

HTML

<div class="variation_form_section">
  <div class="select">
    <div class="swatch-wrapper"></div>
    <div class="swatch-wrapper"></div>
    <div class="swatch-wrapper"></div>
  </div>
</div>

JS

<script>
$(document).ready(function(){
    $(".variation_form_section .select div").each(function() { 
      $(this).click(function() {
        if($(this).hasClass( "active" )){
            $(this).removeClass( "active" );
        }else{
            $(this).addClass( "active" );
        }
      });
    }); 
});
</script>

Answer 1

你不能这样使用:

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

Answer 2

简单地说,active从中删除所有类,然后将active类添加到单击的元素.

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

演示:http://jsfiddle.net/conm54k2/

Answer 3

如果要切换div是否已激活，则只需在清除所有激活项之前进行检查即可。此后，仅在单击的div最初不是活动的时才添加活动状态。

http://jsfiddle.net/wilchow/6208d114/

$(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
    }); 
});