jQuery - Xóa lớp học khỏi tất cả các div ngoại trừ lớp tôi đã nhấp vào

Question

Tôi có một số mã hoạt động, bật và tắt lớp "hoạt động" khi bạn nhấp vào một div-wrapper div.

Tuy nhiên, tôi chỉ muốn một các div này để có lớp hoạt động cùng một lúc. Ngay bây giờ tôi có thể nhấp vào tất cả, và tất cả họ sẽ có lớp hoạt động. Tôi không chắc chắn làm thế nào để loại bỏ các lớp học từ tất cả các div khác ngoại trừ một trong những tôi chỉ cần nhấp vào.

Tôi đã cố gắng sử dụng .parent(), nhưng dường như không hoạt động/Tôi không nghĩ mình đã sử dụng đúng cách.

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

đơn giản, loại bỏ active lớp từ tất cả chúng và sau đó thêm active lớp để các yếu tố nhấp.

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

Bạn có thể sử dụng not như thế này:

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

Bạn có thể thử với .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

Nếu bạn muốn chuyển đổi nếu div đã hoạt động, bạn chỉ cần kiểm tra nó trước khi xóa tất cả các hoạt động. Sau đó, chỉ thêm trạng thái hoạt động nếu div đã nhấp không được kích hoạt ban đầu.

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