跳到Bootstrap輪播上的最后一張幻燈片

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>