Javascript 如何定位引导轮播的活动幻灯片？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30361799/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to target bootstrap carousel's active slide?
提问by Meeps
Evening,
晚上，
Apologies for this likely being a really stupid question, I'm still learning!
为这可能是一个非常愚蠢的问题道歉，我还在学习！
I'm trying to target the active slide in the bootstrap carousel to perform an action. I'd like it to trigger some style changes for each of the three slides i.e. changing button colours etc.
我正在尝试以引导程序轮播中的活动幻灯片为目标来执行操作。我希望它为三张幻灯片中的每一张触发一些样式更改，即更改按钮颜色等。
Earlier I tried just targeting the divs by their numbers(#1, #2, #3), but kept getting stuck there too, it looked something like this;
早些时候，我尝试通过数字（#1, #2, #3）来定位 div ，但也一直卡在那里，它看起来像这样；
var shead = document.getElementById("sub-head");
if ($('#1').is(':visible') && $('#2').is(':hidden') && $('#3').is(':hidden')) {
shead.style.color = "blue";
}
I repeated this for each of the slides using :visible& :hiddenfor each of the divs accordingly, although I only ever seemed to get stuck with the last presentation of the style colour change.
我对每个幻灯片使用:visible&:hidden对每个 div 相应地重复了这一点，尽管我似乎只遇到了样式颜色更改的最后一次演示。
I did a some searching on this and I've seen people using .carousel(1), but I just seem to keep hitting dead ends, can anyone give me a hand with this, not sure why it's not catching, any guidance would be appreciated.
我对此进行了一些搜索，我看到有人使用.carousel(1)，但我似乎一直在陷入死胡同，谁能帮我解决这个问题，不知道为什么它没有被捕获，任何指导将不胜感激。
HTML
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");
}
回答by John
Edit: This answer was written for Bootstrap 3, but it should work for bootstrap 4 as well. See the following link for bootstrap 4 docs https://getbootstrap.com/docs/4.0/components/carousel/#events.
编辑：此答案是为 Bootstrap 3 编写的，但它也适用于 bootstrap 4。有关 bootstrap 4 文档的以下链接，请参阅 https://getbootstrap.com/docs/4.0/components/carousel/#events。
Bootstrap has custom events you can hook to.
Bootstrap 具有可以挂钩的自定义事件。
This event will fire when the method is going to slide.
当方法要滑动时将触发此事件。
$('#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
}
})
There is also a slid.bs.carouselevent. This event is invoked when the slider is finished sliding.
还有一个slid.bs.carousel活动。当滑块完成滑动时调用此事件。
You can read about the differences here https://getbootstrap.com/docs/3.3/javascript/#carousel-events.
您可以在https://getbootstrap.com/docs/3.3/javascript/#carousel-events了解这些差异。
P.S. note that evis the event object that is passed to the onSlidecallback when the event was triggered. Note that the name evcould have been changed to anything, for example event, it's the order of the parameter in the callback that determines its value not its name. Here the event object is passed in as the first parameter of the callback, this is due not to the above code having named the parameter accordingly ev(although that helps with understanding), but by how the jQuery code calls passed in event handlers (event handlers are a form of callback meant for events) and how the bootstrap code triggers the events. The event object has common properties to a regular JavaScript event, and it has the additional properties given here in the bootstrap 4 docs for carousel events(with its current properties shown below as well in the yellow quote block).
PS注意，这ev是onSlide触发事件时传递给回调的事件对象。请注意，名称ev可以更改为任何内容，例如event，回调中参数的顺序决定了它的值而不是它的名称。这里事件对象作为回调的第一个参数传入，这不是由于上面的代码相应地命名了参数ev（尽管这有助于理解），而是由于 jQuery 代码调用在事件处理程序（事件处理程序）中传递的方式是一种用于事件的回调形式）以及引导代码如何触发事件。事件对象具有常规 JavaScript 事件的通用属性，并且它具有此处给出的附加属性轮播事件的 bootstrap 4 文档（其当前属性如下所示以及黄色引用块中所示）。
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.
direction：旋转木马滑动的方向（“左”或“右”）。
relatedTarget：作为活动项滑动到位的 DOM 元素。
from：当前项目的索引。
to：下一项的索引。
