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

I am trying to carry a class between li's with combine each() and eq() methods when buttons clicked. I am using same code with previous and next buttons except i+1 and i-1 but it is returning me different problems.

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

Here is jsFiddle to examine.

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

5 个解决方案

#1

If for some reason you need the index, you could always do:

如果由于某种原因你需要索引,你总是可以这样做:

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

If not :

如果不 :

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

FIDDLE

#2

I'd try using something more like:

我尝试使用更像的东西:

Here is working jsFiddle.

这是工作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");
    }
});​

using the 'next' selector: Jquery Next

使用'next'选择器:Jquery Next

I avoid math when possible. Counting is hard :-). That said I'm thinking your problem above may be with the index. Hard to say. I'd avoid using selectors like "li" when dealing with a list like this. Try putting a class on the 'ul' portion of it and addressing your li's as: ".myList li"

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

#3

You should return false; after you find your first class of active: http://jsfiddle.net/ufomammut66/np4Pt/

你应该返回false;找到你的第一堂课后:http://jsfiddle.net/ufomammut66/np4Pt/

Whats happening is your iterating over the elements moving forward and changing each one in order. So as you go through each case your setting the next one in sequence as active which in turn makes the next $(this).hasClass('active') check true. This is why the prev event is working, we're moving in reverse order of the loop. So we just need to stop iterating over our collection after we find our active case.

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

Edit 1

You can use .length on any selected object to get how many are returned. So in the example code you provided we can use li.length to get how many li elements are on the page. You may want to use a class selector just to ensure that other li elements are not being used to calculate your ceiling. I have updated the jsFiddle to reflect these changes.

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

#4

You could try even this:

你甚至可以试试这个:

$('.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:

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

This will loop around to last element active (if previous on first) and first element active (if next on last).

这将循环到最后一个活动元素(如果先前是第一个)和第一个元素活动(如果是最后一个)。