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

How to create simple next and prev trigger button for slider's pagination buttons?

本文关键字：按钮 下一个 简单 触发器 上一个 创建 分页      更新时间：2023-09-26

我正在尝试在单击按钮时将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>

j查询：

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

我会尝试使用更像这样的东西：

这是工作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"

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

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

小提琴

你应该

在找到你的第一堂active类后return false;：http://jsfiddle.net/ufomammut66/np4Pt/

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

编辑 1

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

你甚至可以试试这个：

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

尝试以下更新的 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');
    }
});

这将循环到最后一个元素处于活动状态（如果上一个在第一个）和第一个元素处于活动状态（如果下一个在最后一个）。

相关文章：