点击元素上的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 -->
    });
}

等...

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