点击和.next（） - 一个更好的方法？

Question

示例 - jsFiddle

所以我使用以下代码构建了一个简单的滑块：

activeSlide.removeClass("active")
    .next().addClass("active")

if (activeSlide.next().length === 0) {
    firstSlide.addClass("active");
}

一切都很可爱。我想我也许可以使用类似的东西创建一个前进和后退按钮：

control.on('click', 'a.next', function() {
    activeSlide = activeSlide
        .next().removeClass("active")
        .next().addClass("active");
});

它适用于中间幻灯片（有点慢？），但似乎没有在第一个或最后一个触发。

如果有人建议采用更好的方法，或者对如何调整上述代码有所了解，我们将不胜感激。

Answer 1

您的代码存在三个问题：

1. 事件处理程序的设置（问题中的第二个块）位于由计时器调用的函数内部（仅在jsFiddle上看到）。将其移到外面，或者您将设置多个事件处理程序。
2. 在第二个代码块的第四行，您正在调用next()，这意味着您要从下一个块而不是活动块中删除active类。
3. activeSlide变量将被事件处理函数的闭包捕获，并且在按下按钮时可能不会指向当前活动的幻灯片。在事件处理程序中使用activeSlide重新初始化$('.slide.active')。

control.on('click', 'a.next', function() {
    $('.slide.active')
        removeClass("active")
        .next().addClass("active");
});