点击后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”，但我不确定它为什么不起作用。

至于上一个按钮，它并没有像预期的那样删除类“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);
}

这样您每次单击按钮时都会计算您的索引和下一个索引。您这样做的方式是计算一次并一遍又一遍地重用它，因此您将一遍又一遍地在同一个索引上做同样的事情。