更改單擊jQuery時的引導指示器

Question

抱歉，我沒有足夠的互聯網帖子來發布圖片。 我希望能夠將每個圖像更改為其對應的精靈。 有三個列表項。 我一輩子都想不出如何更改它們，因為它們都有兩個需要更改的類。

都有精靈圖片。 這就是我嘗試過的。

$(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');           
    }
});

}）;

這是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>

我真正想要的是單擊一個，它將精靈更改為圖像的“更藍”版本。

Sprites的類分別是.buttonsSm-other_1sm和.buttonsSm-other_2sm，白色和藍色。

認為這種“視覺效果”可能會有所幫助。 因此，例如：第一個單擊[XOO]，第二個單擊[OXO]，最后一個單擊[OOX]，其中X是活動圖像，O是相反的圖像。 抱歉，我仍然無法發布圖片。

我敢肯定，這已經使問題復雜化了。 有人可以幫忙嗎？

Answer 1

我不完全確定您要在點擊邏輯中嘗試做什么...。因為您沒有在切換班級，所以您只是在做一個連續動作（即刪除班級並添加班級）而不要切換它。 因此，相反，您可以在元素上使用默認的子畫面，並且可以說......添加單個類以更改子畫面，因為它必須至少具有一種類型的子畫面，然后說，如果此解決方案沒有滿足您的需求，您能否澄清一下當前邏輯的原因？

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