jquery - 点击元素上的 jquery if 语句（简单滑块）

Question

制作一个非常简单的滑块，这就是我采用的方法。使用此代码，当您单击右箭头时，对于下一张幻灯片，第一次效果很好。问题是右箭头在那之后就死了。

if ($('.slide1').hasClass('active-slide')) {
    $('.right-arrow').click(function () {
         <--! Changes to Slide 2 -->
    });
}

if ($('.slide2').hasClass('active-slide')) {
    $('.right-arrow').click(function () {
         <--! Changes to Slide 3 -->
    });
}

if ($('.slide3').hasClass('active-slide')) {
    $('.right-arrow').click(function () {
         <--! Changes to Slide 4 -->
    });
}

ETC....

Answer 1

这是 SO 上的一个常见问题。您需要重新考虑如何进行这些绑定：

$('.right-arrow').click(function () {
    if ($('.slide1').hasClass('active-slide')) {
        //...
    }
});

如果你想让它更有活力，可以考虑这样的事情：

FIDDLE

$('.right-arrow').click(function() {
    var $active = $('.active-slide');
    var $next = $('.active-slide').next('.slide');
    if ($next.length == 0) $next = $('.slide:first');
    $active.removeClass('active-slide');
    $next.addClass('active-slide');
});