更改单击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");