jQuery Add Class on Click but only allowed once.

Question

Here is what I have so far:

Javascript:

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

So this is working, it is adding the class but I want only one item to be active at all times. So when I click on an item, and it turns active, the next item I click on should be the new active one, and remove the class on the previous one.

Does that make sense? How can I do something like this?

Thanks!

Answer 1

You need to first remove the active class from your thumb_wrapper elements. Try this:

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

Answer 2

Cache your wrapper and call a removeClass() on it first:

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

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

Answer 3

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