2015-09-26 47 views
1

對不起,我沒有足夠的互聯網文章張貼圖像。 我希望能夠將每個圖像更改爲其精靈副本。有三個列表項。我不能爲了我的生活而弄清楚如何改變它們,因爲它們都有兩個需要改變的類。點擊更改引導指示器jQuery

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

$(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,分別是白色和藍色。

認爲這個「視覺」可能有幫助。例如:第一個點擊[X O O]第二個點擊[O X O]最後一個點擊[O O X],其中X是活動圖像,O是相反的。對不起,但我仍然無法發佈圖片。

我已經完成了這個我很確定。有人可以幫忙嗎?

+0

[這](http://stackoverflow.com/questions/15844157/twitter-bootstrap-custom-carousel-indicators)可以幫助你 –

回答

0

我不完全確定你想要在你的點擊邏輯中做什麼......因爲你沒有改變班級,你只做一個持續的行動(這是去除班級,添加一個類)並且不切換它。所以相反,你可以在元素上有默認的精靈,你可以做的是說...添加一個類來改變精靈,因爲它必須至少有一種類型的精靈然後說,如果這個解決方案不滿足你的需求,你能澄清一下你目前的邏輯爲什麼?

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

我試過之前,唯一的問題是,我想其他列出項目以刪除其同行。例如:第一個點擊[X O O]第二個點擊[O X O]最後一個點擊[O O X],其中X是活動圖像,O是相反的。對不起,但我仍然無法發佈圖片。 – PudparK