javascript - 如何定位 Bootstrap 轮播事件幻灯片？

Question

晚上，

很抱歉这可能是一个非常愚蠢的问题，我还在学习!

我正在尝试以 Bootstrap 轮播中的事件幻灯片为目标来执行操作。我希望它能为三张幻灯片中的每一张触发一些样式更改，即更改按钮颜色等。

早些时候我尝试只通过数字 (#1, #2, #3) 定位 div，但也一直卡在那里，看起来像这样；

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

我对每张幻灯片都重复了此操作，相应地对每个 div 使用 :visible 和 :hidden，尽管我似乎只在最后一个演示文稿中卡住了样式颜色的变化。

我对此进行了一些搜索，我看到有人在使用 .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 文档 https://getbootstrap.com/docs/4.0/components/carousel/#events .

Bootstrap 具有您可以 Hook 的自定义事件。

该方法将要滑动时将触发此事件。

$('#Carousel').on('slide.bs.carousel', function onSlide (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事件。当 slider 完成滑动时调用此事件。

您可以在此处了解差异 https://getbootstrap.com/docs/3.3/javascript/#carousel-events .

附言请注意，ev 是在触发事件时传递给 onSlide 回调的事件对象。请注意，名称 ev 可以更改为任何内容，例如 event，回调中参数的顺序决定了它的值而不是它的名称。这里事件对象作为回调的第一个参数传入，这不是因为上面的代码将参数命名为 ev (虽然这有助于理解)，而是jQuery代码如何在事件处理程序中传递的调用(事件处理程序是一种用于事件的回调形式)以及 Bootstrap 代码如何触发事件。事件对象具有 regular JavaScript event 的共同属性，并且它具有此处给出的附加属性 the bootstrap 4 docs for carousel events (其当前属性也在下方黄色引号 block 中显示)。

direction: The direction in which the carousel is sliding (either "left" or "right").
relatedTarget: The DOM element that is being slid into place as the active item.
from: The index of the current item.
to: The index of the next item.