Question

点击按钮时，我尝试在li之间使用合并each()和eq()方法进行分组。我使用除i+1和i-1之外的上一个和下一个按钮使用相同的代码，但它会给我带来不同的问题。

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”

Answer 2

在找到第一堂课return false;后，您应该active： http://jsfiddle.net/ufomammut66/np4Pt/

发生的事情是你对前进的元素进行迭代并按顺序改变每个元素。因此，当您浏览每个案例时，您将下一个按顺序设置为活动状态，从而使下一个$(this).hasClass('active')检查为真。这就是prev事件正在发挥作用的原因，我们正在以循环的相反顺序移动。所以我们只需要在找到活动案例后停止迭代我们的集合。

修改1

您可以在任何选定对象上使用.length来获取返回的对象数。因此，在您提供的示例代码中，我们可以使用li.length来获取页面上有多少个li元素。您可能希望使用类选择器，以确保不使用其他li元素来计算您的上限。我已经更新了jsFiddle以反映这些变化。

Answer 3

如果出于某种原因需要索引，您可以随时执行：

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

FIDDLE

如果不是：

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

FIDDLE

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

Try the following updated 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');
    }
});

这将循环到最后一个元素激活（如果先前是第一个）并且第一个元素激活（如果是最后一个元素）。

如何为滑块的分页按钮创建简单的next和prev触发按钮？

5 个答案: