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"); 
     } 
    }); 

} 

次のボタンをクリックした後、次のスライドに移動しますが、次のスライドに移動しますが、クリックすると次のスライドに進みます。

devツールでHTMLを確認しましたが、条件を満たすスライドの1つに「アクティブ - スライド」というクラス名がありますが、なぜ動作しないのか分かりません。

前のボタンは、「アクティブ - スライド」というクラスを削除していないのですが、なぜこれが起こっているのでしょうか？

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); 
} 

あなたのインデックスと次のインデックスボタンをクリックするたびに計算されますこの方法。あなたがやったやり方は、それを一度計算して何度も何度も再利用しているから、同じインデックスで何度も同じことをやり直すことになります。