jQuery Thêm lớp khi nhấp nhưng chỉ được phép một lần.

Question

Dưới đây là những gì tôi có cho đến nay:

Javascript:

$(document).ready(function() { 
    $(".thumb_wrapper").click(function() { 
     $(this).addClass("active"); 
    }); 
}); 

Vì vậy, đây đang làm việc, nó sẽ bổ sung lớp nhưng tôi muốn chỉ có một mục là hoạt động bất cứ lúc nào. Vì vậy, khi tôi nhấp vào một mục và nó sẽ hoạt động, mục tiếp theo mà tôi nhấp vào phải là mục đang hoạt động mới và loại bỏ lớp đó trước đó.

Điều đó có hợp lý không? Làm thế nào tôi có thể làm một cái gì đó như thế này?

Cảm ơn!

Answer 1

Trước tiên, bạn cần xóa lớp active khỏi các phần tử thumb_wrapper của mình. Hãy thử điều này:

$(".thumb_wrapper").click(function() { 
    $(".thumb_wrapper").removeClass("active"); 
    $(this).addClass("active"); 
}); 

Answer 2

Điều này nên thực hiện.

$(document).ready(function() { 
    $(".thumb_wrapper").click(function() { 
     $(this).parent().children().each(function() { 
      $(this).removeClass("active"); 
     }); 
     $(this).addClass("active"); 
    }); 
}); 

Answer 3

cache wrapper của bạn và gọi một removeClass() vào nó đầu tiên:

var $wrapper = $(".thumb_wrapper"); 

$wrapper.click(function() { 
    $wrapper.removeClass("active"); 
    $(this).addClass("active"); 
}); 

Answer 4

$(".thumb_wrapper").on('click', function() { 
    $(".thumb_wrapper").removeClass('active').find(this).addClass("active"); 
}); 

Answer 5

$(document).ready(function(){ 
    $('.what').click(function(){ 
     $('.what').removeClass('active'); 
     $(this).addClass('active');  
    });  
}); 

tôi giả sử một cái gì đó như thế này?