更新自动幻灯片引导轮播的活动元素

Question

我有3个bootstrap轮播（只有一个可见，取决于你点击这里）：

所有这些都是一样的。如果我单击另一张幻灯片，则会激活此选项（添加选定的课程）。它看起来像这样：

但是当它自动滑动到另一张幻灯片时，这张幻灯片没有显示为激活（不添加选择的类），我不知道为什么它不起作用。

有关此页面的问题：https://bm-translations.de/km.php#video

我的代码：

// handles the carousel buttons
$('[id^=carousel-selector-]').click( function(){
  var id_selector = $(this).attr("id");
  var id = id_selector.substr(id_selector.length -1);
  id = parseInt(id);
  $('.carousel').carousel(id);
  $('[id^=carousel-selector-]').removeClass('selected');
  $(this).addClass('selected');
});

// when the carousel slides, auto update
$('.carousel').on('slide.bs.carousel', function (e) {
  var id = $('.item.active').data('slide-number');
  id = parseInt(id)+1;
  $('[id^=carousel-selector-]').removeClass('selected');
  $('[id=carousel-selector-'+id+']').addClass('selected');
});

在自动幻灯片上，它没有添加所选的类，但它在点击时执行。我的代码怎么了？

Answer 1

自动轮播功能的问题似乎是你的“id”不正确，因为抓住它的选择器并不针对正确的元素。

您需要定位当前“已选择”的项目。现在，因为你的“id”没有在这里重新获得：
var id = $('.item.active').data('slide-number');

理想情况下，您的“选定”类应该在您的<li>中，这样您就可以轻松获取索引，但如果您想以正确的方式获取正确的ID，那么您可以抓住这样的索引：

var id = $("#carouselMarketing1 a.selected").parent().index();

或

var id = $("#carouselMarketing1 a.selected").parent().attr("data-slide-to")

编辑：

在第二次看之后，我发现您的问题是该问题与尝试检索具有多个轮播的ID有关，感谢对此的评论。

这对我有用：

id = $(a.currentTarget).find('.item.active').index()

基本上你只是获取当前所选轮播下的活动项目的ID。

Answer 2

您正在使用on绑定slide.bs.carousel，但这不是jQuery事件。您必须改为使用bind。

$('.carousel').bind('slide.bs.carousel', function(e){
    var $this = $(this), index = $this.find('.item.active').index();
    var $sliderButtons = $this.find('[data-slide-to] a');
    $sliderButtons.eq(index).removeClass('selected');
    $sliderButtons.eq( index+1 < $sliderButtons.length ? index+1 : 0).addClass('selected');
});