Javascript 如何瞄准引导转盘'；什么是活动幻灯片？

晚上,

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

我正试图以引导转盘中的活动幻灯片为目标执行操作。我希望它能为三张幻灯片中的每一张触发一些风格变化，即改变按钮颜色等

早些时候，我试着仅仅根据div的编号（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

和

：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>

---

编辑：这个答案是为bootstrap3编写的，但它也应该适用于bootstrap4。有关bootstrap 4文档，请参见以下链接

引导程序具有自定义事件，您可以将其挂钩

此事件将在方法滑动时触发

$('#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
  }
})

还有一个

slided.bs.carousel

事件。滑块滑动完成后将调用此事件

你可以在这里了解不同之处

注意，

ev

是触发事件时传递给

onSlide

回调的事件对象。请注意，名称

ev

可以更改为任何内容，例如

event

，是回调中参数的顺序决定其值，而不是其名称。在这里，事件对象作为回调的第一个参数传入，这不是因为上面的代码相应地命名了参数

ev

（尽管这有助于理解），而是因为jQuery代码调用如何传入事件处理程序（事件处理程序是用于事件的回调形式）以及引导代码如何触发事件。事件对象对具有公共属性，并且具有中给出的其他属性（其当前属性也显示在下面的黄色引号块中）

方向：转盘滑动的方向（“左”或“右”）。
relatedTarget：作为活动项滑动到位的DOM元素。
from：当前项目的索引。
至：下一项的索引

---

您的具体问题是什么？不能用数字启动HTML

id

或

name

属性。用字母而不是数字开始

id

，看看这是否有用。ie

仔细看看下面的帖子：嗨，约翰，这正是我想要的，尽管我在开关上遇到了一些问题。当我将id值正确地记录到控制台时，我似乎只挂接了默认值，而没有挂接case选项，我不知道为什么，因为我的经验有限。这是因为数据不是整数，根据添加了解析来解决；谢谢约翰，非常感谢你的意见：）@Sinden是的，谢谢你的反馈。抱歉，我最初没有检查带有id和开关的代码是否正确。我改了，现在应该可以用了。我决定使用字符串而不是parseInt。这将使它很容易改变，即使id不仅仅是一个数字。惊人的解决方案

$('#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
  }
})