使用Jquery將活動類添加到同一頁面上的2個Bootstrap Carousels中

Question

我在一頁上有2個引導輪播（特殊輪播和報價輪播）。 輪播都沒有設置任何活動的類，因為我想用javascript設置它們。 我的JavaScript代碼適用於第一個輪播，但不適用於第二個輪播。 兩個輪播使用不同的ID，我嘗試將javascript代碼復制為僅將第二個輪播作為目標，但幻燈片不顯示。

第二個滑塊中的第一項添加了2個新類，這些新類緊隨其后 ，這顯然是錯誤的。

我的JavaScript看起來像這樣：

<!-- Code for special carousel -->
<script>
    jQuery(document).ready(function() {
        $(".carousel-indicators li:first").addClass("active");
        $(".carousel-inner .item:first").addClass("active");
    });
</script>

<!-- Code for quote carousel -->
<script>
    (document).ready(function() {
        $(".carousel-indicators li:first").addClass("active");
        $(".carousel-inner .item:first").addClass("active");
    });
</script>

我已經建立了一個演示頁面來顯示問題http://handcoded.co.uk/carousel.html

如何定位第二輪播，以便向其添加活動類？

Answer 1

問題出在您的JavaScript代碼中，您的jquery選擇器定位於同一輪播實例。 您應該像這樣縮小選擇器：

<!-- Code for special carousel -->
<script>
$(document).ready(function(){
  $("#special-carousel .carousel-indicators li:first").addClass("active");
  $("#special-carousel .carousel-inner .item:first").addClass("active");
});
</script>

<!-- Code for quote carousel -->
<script>
$(document).ready(function(){
  $("#quote-carousel .carousel-indicators li:first").addClass("active");
  $("#quote-carousel .carousel-inner .item:first").addClass("active");
});
</script>

鏈接到工作提琴： https : //jsfiddle.net/DTcHh/11116/

請注意，您的代碼可能有一些增強，例如您只能使用一個准備好的文檔，緩存jquery選擇器等。