Question

我在1页上有2个bootstrap轮播（特殊轮播和报价轮播）。由于我想用javascript设置它们，因此carousel都没有设置任何活动类。我的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选择器针对的是同一个carousel实例。你应该缩小你的选择器：

<!-- 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选择器等

使用Jquery在同一页面上将活动类添加到2个Bootstrap Carousels

1 个答案: