我正在使用 bootstrap 创建一个 Carousel,我想创建一个链接,它可以直接跳转到 carousel 中的最后一张幻灯片(有 n 张幻灯片,不是固定数量)。我试图以这种方式解决将类 active
分配给最后一个 div
的问题:
$(".last").click(function(){
$('myCarousel div').removeClass('active');
$('myCarousel div:last-child').addClass('active');
});
但是,如果我的页面中只有一个轮播,则此方法有效,但如果轮播不止一个,则链接转到所有轮播的最后一张幻灯片。我该如何解决这个问题?这是代码示例:
<div id="myCarousel1" class="carousel slide">
<div class="carousel-inner" role="listbox">
<div class="item active slide">
<img src="http://placehold.it/350x150">
</div>
[…] other items
</div>
</div>
<ul>
<a href="#myCarousel1" data-slide="prev"><li>Prev</li></a>
<a href="#myCarousel1" data-slide="next"><li>Next</li></a>
<a href="#myCarousel1"><li class="last">Last</li></a>
</ul>
<div id="myCarousel2" class="carousel slide">
<div class="carousel-inner" role="listbox">
<div class="item active slide">
<img src="http://placehold.it/350x150">
</div>
[…] other items
</div>
</div>
<ul>
<a href="#myCarousel2" data-slide="prev"><li>Prev</li></a>
<a href="#myCarousel2" data-slide="next"><li>Next</li></a>
<a href="#myCarousel2"><li class="last">Last</li></a>
</ul>
<script>
$(document).ready(function(){
$(".last").click(function(){
$('[id^="myCarousel"] div').removeClass("active");
$('[id^="myCarousel"] div:last-child').addClass("active");
});
});
</script>
谢谢!
最佳答案
只需像这样将轮播 ID 添加到您的 jQuery 选择器中:
$(".last").click(function(){
$('#myCarousel1 div').removeClass('active');
$('#myCarousel1 div:last-child').addClass('active');
});
编辑:
如果您希望轮播的 ID 是动态的,则必须在某处引用它。您可以在指向最后一张幻灯片的链接上放置一个属性,并在单击链接时读取此属性,如下所示:
$('.last').click(function(e){
var id = $(this).attr('data-id');
$('#myCarousel' + id + ' div').removeClass('active');
$('#myCarousel' + id + ' div:last-child').addClass('active');
});
然后像这样向您的链接添加数据 ID:
<li class="last" data-id="2">Last</li>
关于javascript - 跳转到 Bootstrap 轮播上的最后一张幻灯片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34995944/