Question

晚上，

对此道歉可能是一个非常愚蠢的问题，我还在学习！

我正在尝试将引导旋转木马中的活动幻灯片作为目标来执行操作。我希望它能为三个幻灯片中的每一个触发一些样式更改，即更改按钮颜色等。

之前我尝试过根据他们的数字（#1, #2, #3）定位div，但也一直卡在那里，看起来像这样;

var shead = document.getElementById("sub-head");
if ($('#1').is(':visible') && $('#2').is(':hidden') && $('#3').is(':hidden')) {   
    shead.style.color = "blue";
}

我使用:visible＆amp; amp; :hidden相应地为每个div，虽然我似乎只是被最后一次呈现样式颜色变化所困扰。

我对此进行了一些搜索，我看到有人使用.carousel(1)，但我似乎只是在追求死胡同，任何人都可以帮我一把，不知道为什么它没有捕捉，任何指导将不胜感激。

HTML

<header id="Carousel" class="carousel slide carousel-fade">

    <ol class="carousel-indicators">
        <li data-target="Carousel" data-slide-to="0" class="active"></li>
        <li data-target="Carousel" data-slide-to="1"></li>
        <li data-target="Carousel" data-slide-to="2"></li>
    </ol>

    <div class="carousel-inner">
       <div class="item active" id="1"></div>
       <div class="item" id="2"></div>
       <div class="item" id="3"></div>
    </div>

</header>

JAVASCRIPT

if ($('#Carousel').carousel(1).hasClass('active')) {
    alert("this is an alert");
}

Answer 1

编辑：这个答案是为Bootstrap 3编写的，但它也适用于bootstrap 4。请参阅以下链接以获取bootstrap 4 docs https://getbootstrap.com/docs/4.0/components/carousel/#events。

Bootstrap包含您可以挂钩的自定义事件。

此方法将在方法滑动时触发。

$('#Carousel').on('slide.bs.carousel', function (ev) {
  var id = ev.relatedTarget.id;
  switch (id) {
    case "1":
      // do something the id is 1
      break;
    case "2":
      // do something the id is 2
      break;
    case "3":
      // do something the id is 3
      break;
    default:
      //the id is none of the above
  }
})

还有一个slid.bs.carousel事件。滑块完成滑动时会调用此事件。

您可以在此处阅读https://getbootstrap.com/docs/3.3/javascript/#carousel-events的差异。

如何定位bootstrap carousel的活动幻灯片？

1 个答案: