Question

我有一些代码正常工作，当您点击swatch-wrapper div时，可以打开和关闭“激活”类。

但是，我只希望这些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

您可以像这样使用not：

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

Answer 4

您可以尝试使用.siblings（）http://api.jquery.com/siblings/

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

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

Answer 5

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

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

5 个答案: