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

Posted 2023-03-16

【中文标题】如何为滑块的分页按钮创建简单的下一个和上一个触发按钮？

【英文标题】：How to create simple next and prev trigger button for slider's pagination buttons?

【发布时间】：2012-08-09 16:55:32

【问题描述】：

我正在尝试在单击按钮时使用组合 each() 和 eq() 方法在 li 之间进行类。除了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
        
    );
);

【参考方案1】：

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

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

编辑 1

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

【讨论】：

我们如何使用 if( i+1

更新了答案以包含此内容。

【参考方案2】：

我会尝试使用类似的东西：

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”

【参考方案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

【讨论】：

+1 来自我，我需要不间断的导航结构。你能解释一下你的第一种方法吗？

尤其是我不明白这一行： i = i >= $('li').length-1 ？ 0 : i+1;

如果i 的长度等于或大于li 的长度，即列表元素的数量，则再次从零开始，否则只需将i 加一即可。这是一个三元表达式（if / else）！

【参考方案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');
);

【参考方案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');
    
);

这将循环到最后一个活动元素（如果前一个在第一个）和第一个活动元素（如果下一个在最后一个）。