jQuery內容滑塊停止工作後點擊

Question

function nextSlideFunc() { 
    var currentSlide = $(".slide.active-slide"); 
    var currentSlideIndex = $(".slide.active-slide").index(); 
    var nextSlideIndex = currentSlideIndex + 1; 
    var nextSlide = $(".slide").eq(nextSlideIndex); 

    $("#nextBtn").on("click", function(e) { 
     e.preventDefault(); 

     currentSlide.removeClass("active-slide"); 

     if(nextSlideIndex === $(".slide").last().index() + 1) { 
      //stay at last slide when reached. 
      $(".slide").eq(nextSlideIndex - 1).addClass("active-slide"); 
     } else { 
      nextSlide.addClass("active-slide"); 
     } 
    }); 

} 

當我點擊下一個按鈕後，幻燈片進入下一張幻燈片，這是我想要的，但是當我繼續點擊時，它只是停止前進。

我在開發工具中檢查了我的HTML，它在其中一個滿足條件的幻燈片上有類名「active-slide」，但我不確定它爲什麼不起作用。

至於前一個按鈕，它不會刪除類似於它應該的類「活動幻燈片」，任何想法爲什麼會發生這種情況？

Answer 1

你必須設置點擊事件的監聽器裏的變量：

https://codepen.io/anon/pen/OxMxwd

$("#prevBtn").on("click", function(e) { 
    var currentSlide = $(".slide.active-slide"); 
    var currentSlideIndex = $(".slide.active-slide").index(); 
    var prevSlideIndex = currentSlideIndex - 1; 
    var prevSlide = $(".slide").eq(prevSlideIndex); 
} 

這樣，你將計算每次點擊按鈕時你的索引和下一個索引。你做到這一點的方法是計算一次並重復使用它，所以你會一次又一次地在同一個索引上做同樣的事情。