javascript - 如何为 slider 的分页按钮创建简单的下一个和上一个触发按钮？

Question

我试图在 li 之间携带一个类，并在单击按钮时结合使用 each() 和 eq() 方法。除了 i+1 和 i-1 之外，我对上一个和下一个按钮使用相同的代码，但它返回给我不同的问题。

Here is jsFiddle to examine.

html:

<span class="prev">prev</span>
<ul>
    <li>0</li>
    <li>1</li>
    <li class="active">2</li>
    <li>3</li>
    <li>4</li>
</ul>
<span class="next">next</span>

jQuery:

var li = $('li');

$('.prev').click(function() {
    li.each(function(i) {
        if ( $(this).hasClass('active') ) {
            console.log(i);
            //this returning current true value = 2

            li.removeClass('active');
            li.eq(i-1).addClass('active');
            //this is working better
            //problem is: not selecting 4
        }
    });
});

$('.next').click(function() {
    li.each(function(i) {
        if ( $(this).hasClass('active') ) {
            console.log(i);
            //this returning current true value = 2

            //problem starts:
            //li.removeClass('active');
            //when this is active; all active classes are gone

            li.eq(i+1).addClass('active');
            //try to select next 'li' here
            //but it is selecting all li's bigger than current value
        }
    });
});

Answer 1

我会尝试使用更像:

Here is working jsFiddle.

$(".next").click(function(){
    if($("li.active").next().length > 0){
        $("li.active").removeClass("active").next("li").addClass("active");
    }
});
$(".prev").click(function(){
    if($("li.active").prev().length > 0){
        $("li.active").removeClass("active").prev("li").addClass("active");
    }
});​

使用“下一个”选择器:Jquery Next

我尽可能避免数学。数数很难 :-)。那就是说我认为您上面的问题可能与索引有关。很难说。在处理这样的列表时，我会避免使用像“li”这样的选择器。尝试将一个类放在它的“ul”部分并将你的 li 作为:“.myList li”