jQuery - Rimuovi classe da tutte le div tranne quella su cui ho fatto clic su

Question

Ho un po 'di codice funzionante, che attiva e disattiva la classe "attiva" quando si fa clic su un div swatch-wrapper.

Tuttavia mi piacerebbe solo uno di questi div per avere la classe attiva alla volta. In questo momento potevo fare clic su tutti, e tutti avrebbero avuto la classe attiva. Non sono sicuro di come rimuovere la classe da tutte le altre div tranne per quella che ho appena cliccato.

Ho provato a utilizzare .parent(), ma non sembra funzionare/Non credo di usarlo correttamente.

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

Semplicemente, rimuovere active classe da tutti e quindi aggiungere active classe all'elemento cliccato.

$(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/

Answer 2

È possibile utilizzare not come questo:

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

Answer 3

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

Answer 4

Si può provare con .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/

Answer 5

Se si desidera attivare o disattivare se il div è già attivo, è sufficiente controllarlo prima di cancellare tutti gli elementi attivi. Successivamente, aggiungi solo uno stato attivo se il div cliccato non era originariamente attivo.

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