javascript - 使用选项卡时错误地应用了 Bootstrap 轮播事件类

Question

我有一个带有 Bootstrap Carousel 的 Wordpress 网页，但没有设置事件类。这些都是由 JavaScript 处理的。

网页显示可用房间，每个房间使用自己的选项卡。当网页首次加载时，第一个房间轮播会按其应有的方式显示并正常工作。图像按其应有的方式滑动。如果我随后重复滑动浏览另一个房间的一些轮播图像的过程，然后返回到前一个房间，则最初会显示多于 1 个图像。

这是因为轮播中的 2 个元素有一个事件类，我不知道如何阻止这种情况发生。

以下是将事件类添加到轮播和选项卡的代码。

$('div[class="carousel-inner"] div:first').addClass( "active" );
    $('ol[class="carousel-indicators"] li:first').addClass( "active" );


    $('#room-tabs').on('shown.bs.tab', function() 
    {
        var $tp = $('.tab-pane:visible');
        $tp.find('.item:first').addClass('active');


        scrollTo($tp, 40);

    });


  });

暂存网站是http://thecurve.staging.wpengine.com/rooms/

我真的很难使用 javascript，因此我们将不胜感激。

谢谢

Answer 1

问题是您将事件类添加到第一个项中。但是，当您返回到已滑动的轮播时，第二、第三或第四位置有一个事件元素。因此，添加类后，您将有两个事件元素，然后它们都会显示。

一个快速修复方法是在再次添加之前删除所有事件类，如下所示:

$('#room-tabs').on('shown.bs.tab', function() {

  $(".carousel-inner > .active").removeClass("active");

  var $tp = $('.tab-pane:visible');
  $tp.find('.item:first').addClass('active');

  scrollTo($tp, 40);
});