javascript - jQuery 内容 slider 在单击后停止工作

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

这样，每次单击按钮时，您都会计算您的索引和下一个索引。您这样做的方式是计算一次并一遍又一遍地重复使用它，因此您将一遍又一遍地对同一索引执行相同的操作。