抱歉,我没有足够的互联网帖子来发布图片。 我希望能够将每个图像更改为其对应的 Sprite 图像。共有三个列表项。我一生都无法弄清楚如何更改它们,因为它们都有两个需要更改的类。
全部都有 Sprite 图像。这是我尝试过的。
$(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>
我真正想要的是点击其中一个,它将 Sprite 更改为图像的“更蓝”版本。
Sprite 的类别为 .buttonsSm-other_1sm 和 .buttonsSm-other_2sm,分别为白色和蓝色。
认为这个“视觉”可能有帮助。例如:第一个单击 [ X O O ] 第二个单击 [ O X O ] 最后一个单击 [ O O X ] ,其中 X 是事件图像,O 是相反的图像。抱歉,我仍然无法发布图片。
我确信我把这件事搞得太复杂了。有人可以帮忙吗?
最佳答案
我不完全确定你想在点击逻辑中做什么......因为你没有切换类,你只做一个连续的操作(即删除一个类并添加一个类)并且不切换它。因此,您可以在元素上使用默认 Sprite ,您可以做的是...添加一个类来更改 Sprite ,因为它必须至少有一种类型的 Sprite ,然后说,如果此解决方案没有满足您的需求,您能澄清一下您当前逻辑的原因吗?
$("#takeout").toggleClass("blueSprite");
关于javascript - 单击 jQuery 更改 Bootstrap 指示器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32793108/