jQuery - 从所有 div 中删除类，除了我点击的那个

jQuery - Remove class from all div's except the one I clicked on

提问by Keryn Gill

I have some code working, that toggles the class "active" on and off when you click on a swatch-wrapper div.

我有一些代码可以工作，当您单击色板包装器 div 时，它会打开和关闭类“活动”。

However I would only like oneof these div's to have the active class at a time. Right now I could click them all, and they would all have the active class. I'm not sure how to remove the class from all the other div's except for the one I just clicked on.

不过，我只想一个这些div的的有一次活动类。现在我可以全部点击它们，它们都会有活跃的类。我不知道如何从所有其他 div 中删除该类，除了我刚刚点击的那个。

I tried to use .parent(), but it didn't seem to work / I don't think I was using it correctly.

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

HTML

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

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>

回答by Bhojendra Rauniyar

You can use notlike this:

你可以不这样使用：

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

回答by Mateusz Nowak

Simply, remove activeclass from them all and then add activeclass to the clicked element.

简单地，active从它们中删除类，然后将active类添加到单击的元素。

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

Demo: http://jsfiddle.net/conm54k2/

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

回答by Wil

If you want to toggle if the div is already active, you just have to check it before clearing all the actives. After that, only add an active state if the clicked div was not originally active.

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

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

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

回答by Paúl Díaz Navarrete

You can try with .siblings() http://api.jquery.com/siblings/

您可以尝试使用 .siblings() http://api.jquery.com/siblings/

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

demo: http://jsfiddle.net/conm54k2/4/

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

回答by Mohamed-Yousef

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