Question

我正在创建带有引导程序的轮播，我想创建一个直接跳转到轮播中最后一张幻灯片的链接（使用 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>

谢谢！

Answer 1

只需将轮播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>

跳转到Bootstrap轮播上的最后一张幻灯片

1 个答案: