Change Bootstrap Indicators on click jQuery

Question

Sorry I don't have enough internet post to post an image. I want to be able to change each image to its sprite counterpart. There are three list items. I can't for the life of me figure out how to change them, because they all have two classes that need to be changed.

All have sprite images. This is what I've tried.

$(function(){
$('#carousel-indicatorsForms li').on('click', function(){
    if($('#takeout').hasClass('active')){
        $(this).removeClass('buttonsSm-food_1sm');
        $(this).addClass('buttonsSm-food_2sm');
    } else if ($('#groceries').hasClass('active')) {
        $('#takeout').removeClass('buttonsSm-food_2sm');
        $('#takeout').addClass('buttonsSm-food_1sm');           
    }
});

});

Here's the HTML:

  <ol id="carousel-indicatorsForms" class="carousel-indicators">
<li id="takeout" data-target="#carousel-example-generic" data-slide-to="0" class="buttonsSm-sprite buttonsSm-food_1sm carouselButton active"></li>
<li id="groceries" data-target="#carousel-example-generic" data-slide-to="1" class="buttonsSm-sprite buttonsSm-grocery_1sm carouselButton"></li>
<li id="custom" data-target="#carousel-example-generic" data-slide-to="2" class="buttonsSm-sprite buttonsSm-other_1sm carouselButton"></li></ol>

What I really want is to click on one and it changes the sprite to the "more blue" version of the image.

The Sprites' classes are .buttonsSm-other_1sm and .buttonsSm-other_2sm, white and blue respectively.

Thought this "visual" might help. So for instance: first one clicked [ XOO ] second one clicked [ OXO ] last one clicked [ OOX ] , with X being the active image, and O being the opposite. Sorry but I still can't post images.

I'm over complicating this I'm sure. Can someone help?

Answer 1

i'm not entirely sure what you're trying to do in your click logic.... because you're not switching the class, you're only doing one continual action (which is to remove a class and add a class) and not toggling it. So instead you can have the default sprite on the element and what you can do is say... add a single class to change out the sprite since it MUST have at least one type of sprite and then say, if this solution doesn't meet your needs, could you clarify a little the why of your current logic?

$("#takeout").toggleClass("blueSprite");