首页 文章

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

提问于
浏览 次
0

我在1页上有2个引导旋转木马（特殊旋转木马和报价轮播） . 由于我想用javascript设置它们，因此carousel都没有设置任何活动类 . 我的javascript代码适用于第一个轮播但不适用于第二个轮播 . 两个轮播都使用不同的ID，我尝试复制javascript代码只针对第二个轮播，但幻灯片不显示 .

第二个滑块中的第一个项目添加了2个新类，它们是 next left ，这显然是错误的 .

我的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

如何定位第二个轮播以便为其添加活动类？

javascript jquery html twitter-bootstrap

1 回答

  • 0

    问题出在你的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选择器等

    回复于

相关问题