如何创建滑块的分页按钮简单next和prev触发按钮？(How to create simple n

我试图携带间的类别li的有机结合起来each()和eq()方法时，按钮点击。 我使用相同的代码与一个和下一个按钮，除i+1和i-1但它返回我不同的问题。

这里的jsfiddle检查。

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:

如果由于某种原因，你需要的指数，你总是可以这样做：

$('.prev').on('click', function() {
    var i = $(".active").index();
        i--;
    $(".active").removeClass('active');
    $('li').eq(i).addClass('active');
});

$('.next').on('click', function() {
    var i = $(".active").index();
        i = i >= $('li').length-1 ? 0 : i+1;
    $(".active").removeClass('active');
    $('li').eq(i).addClass('active');
});​

小提琴

如果不 ：

$('.prev, .next').on('click', function() {
    if ($(".active")[$(this).attr('class')]().index()!=-1)
    $(".active").removeClass('active')[$(this).attr('class')]().addClass('active');
});

小提琴

Answer 2:

我会尝试使用更多的东西，如：

在这里工作的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的下一步

我逃避数学可能的情况下。 计数是很难:-)。 这就是说我想你上面的问题，可能与指数。 很难说。 我会避免这样的列表打交道时使用选择，如“礼”。 尝试把在它的“UL”部分一类以及解决您的李时珍为：“.myList礼”

Answer 3:

你应该return false; 之后，你发现自己的一流的active ： http://jsfiddle.net/ufomammut66/np4Pt/

发生了什么是你遍历元素前进和变化的每一个秩序。 所以，当你经历各种情况下的设置序列中的下一个为活动这又使得接下来的$(this).hasClass('active')检查真实的。 这就是为什么上一个事件的工作，我们在循环相反的顺序移动。 所以，我们只需要停止迭代在我们收集后，我们发现我们的活跃情况。

编辑1

您可以使用.length任意选择的对象得到多少返回。 因此，在该示例代码，您只要我们可以使用li.length获得元素多少李在页面上。 您可能希望只使用一类选择，以确保其他li元素不被用来计算你的上限。 我已经更新了的jsfiddle以反映这些变化。

Answer 4:

你可以尝试连这个：

$('.prev').click(function() {
    var el = $.find('li[class=active]'); 
    //check if are prev li
    if(!$(el).prev().is(':first')) $(el).removeClass('active').prev().addClass('active');
});

$('.next').click(function() {
    var el = $.find('li[class=active]'); 
    //check if are next li
    if(!$(el).next().is(':last')) $(el).removeClass('active').next().addClass('active');
});

Answer 5:

请尝试以下更新的jsfiddle ：

var li = $("li");

$(".prev").click(function() {
    var activeLI = $("li.active");
    var index = $(activeLI).index();

    $(activeLI).removeClass('active');

    if (index > 0) {
        $(activeLI).prev().addClass('active');
    } else {
        $(li).last().addClass('active');
    }
});

$(".next").click(function() {
    var activeLI = $("li.active");
    var index = $(activeLI).index() + 1;

    $(activeLI).removeClass('active');

    if (index < li.length) {
        $(activeLI).next().addClass('active');
    } else {
        $(li).first().addClass('active');
    }
});

这将循环周围活跃的最后一个元素（如果以前在第一）和第一个元素活跃的（如果下次在最后一个）。

文章来源: How to create simple next and prev trigger button for slider's pagination buttons?