使用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选择器等。