Javascript 跳到引导转盘上的最后一张幻灯片

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

[……]其他项目


[……]其他项目


$（文档）.ready（函数（）{
$（“.last”）。单击（函数（）{
$（'[id^=“myCarousel”]div'）.removeClass（“活动”）；
$（'id^=“myCarousel”]div:last child'）.addClass（“活动”）；
});      
});

---

谢谢

只需将转盘id添加到jQuery选择器中，如下所示：

$(".last").click(function(){
    $('#myCarousel1 div').removeClass('active'); 
    $('#myCarousel1 div:last-child').addClass('active'); 
});

$('.last').click(function(e){
    var id = $(this).attr('data-id');
    $('#myCarousel' + id + ' div').removeClass('active'); 
    $('#myCarousel' + id + ' div:last-child').addClass('active');
});

<li class="last" data-id="2">Last</li>

编辑：

如果您希望转盘的id是动态的，您必须在某个地方引用它。您可以在最后一张幻灯片的链接上放置一个属性，并在单击链接时读取该属性，如下所示：

$(".last").click(function(){
    $('#myCarousel1 div').removeClass('active'); 
    $('#myCarousel1 div:last-child').addClass('active'); 
});

$('.last').click(function(e){
    var id = $(this).attr('data-id');
    $('#myCarousel' + id + ' div').removeClass('active'); 
    $('#myCarousel' + id + ' div:last-child').addClass('active');
});

<li class="last" data-id="2">Last</li>

并向链接添加数据id，如下所示：

$(".last").click(function(){
    $('#myCarousel1 div').removeClass('active'); 
    $('#myCarousel1 div:last-child').addClass('active'); 
});

$('.last').click(function(e){
    var id = $(this).attr('data-id');
    $('#myCarousel' + id + ' div').removeClass('active'); 
    $('#myCarousel' + id + ' div:last-child').addClass('active');
});

<li class="last" data-id="2">Last</li>

上次

---

谢谢，但这样我应该在每张幻灯片上重复代码。。。是否有一个更通用的方法可以不重复代码，我可以使用类似于数据幻灯片属性的方法？这将从所有div的内部#myCarousel1中删除.active类，并在最后一个上添加活动类，.last是button类。。。它可以处理任意数量的幻灯片。您也可以使用

$（“#myCarousel1 div”）。长度
而不是使用固定索引。非常抱歉，我混淆了术语（幻灯片/旋转木马）。我的意思是，如果我的页面上有2个或更多的旋转木马，我应该重复
myCarousel1、myCarousel2的代码。。。myCarousel_n_
虽然我想找到一种通用的方法来实现这一点……为什么不使用.parent（'.parent class'）选择器来缩小Carousel容器的范围，这样您将只查看该父对象的最后一个子对象，而不是屏幕上的所有Carousel。