javascript - Change Bootstrap Indicators on click jQuery -

sorry don't have enough internet post post image. want able change each image sprite counterpart. there 3 list items. can't life of me figure out how change them, because have 2 classes need changed.

all have sprite images. 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 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 want click on 1 , changes sprite "more blue" version of image.

the sprites' classes .buttonssm-other_1sm , .buttonssm-other_2sm, white , blue respectively.

thought "visual" might help. instance: first 1 clicked [ x o o ] second 1 clicked [ o x o ] last 1 clicked [ o o x ] , x being active image, , o being opposite. sorry still can't post images.

i'm on complicating i'm sure. can help?

i'm not entirely sure you're trying in click logic.... because you're not switching class, you're doing 1 continual action (which remove class , add class) , not toggling it. instead can have default sprite on element , can say... add single class change out sprite since must have @ least 1 type of sprite , say, if solution doesn't meet needs, clarify little why of current logic?

$("#takeout").toggleclass("bluesprite");