用jquery prev next按钮循环浏览无序列表 [英] Looping through unordered list with jquery prev next buttons

问题描述

我有一个无序列表，其中包含两个链接，上一个和下一个按钮.我的目标是:单击上一个按钮时，上一个列表项会将颜色更改为红色.单击下一个项目时，下一个列表项目将更改颜色.当到达最后一个列表项并单击下一步"时，它将循环回到第一个(对于上一个链接，反之亦然).

I have an unordered list with two links, a previous and next button. My goal is: when the previous button is clicked, the previous list item will change colors to red. When the next item is clicked, the next list item will change colors. When the last list item is reach and and next is clicked, it will loop back to the first one (and vice versa for previous link).

到目前为止，我使用下面的jquery/html达到了95％的工作水平:

So far, I have this working at 95% using the jquery/html below:

<div id="lessonThree">
<a class="prev" href="#">Prev</a>
<a class="next" href="#">Next</a>

    <ul>
        <li>Ferrari</li>
        <li>Lamborghini</li>
        <li>Aston Martin</li>
        <li>Fiat</li>
        <li>Saab</li>
        <li>Harley Davidson</li>
        <li>Triumph</li>
        <li>Zonda</li>
        <li>Bugatti</li>
        <li>Suzuki</li>
    </ul>
    </div>

开始查询

    var myCar = $("#lessonThree li").length;
    var liNum = 0;

        $("a.next").click(function(){
            $("#lessonThree li").css("color","black");

            if(myCar > liNum){
                $("#lessonThree li").eq(liNum).css('color', 'red');
                liNum ++;
            } 
            else {
                liNum = 0;
                $("#lessonThree li").eq(liNum).css('color', 'red');
            }
            return false;
        });

        $("a.prev").click(function(){
            $("#lessonThree li").css("color","black");

            if(liNum > 0){
                liNum --;
                $("#lessonThree li").eq(liNum).css('color', 'red');
            } 
            else {
                liNum = 9;
                $("#lessonThree li").eq(liNum).css('color', 'red');
            }
            return false;
        });

问题是，当您按几次"next"然后按"previous"时，您需要按两次"previous"才能使其正常工作.基本上，当从上一个切换到下一个(或下一个)时，您需要单击两次按钮才能看到jquery前进到下一个或上一个列表项.有什么想法可以解决我的jquery使其在第一次点击时起作用吗?

The problem is when you press 'next' a few times and then press 'previous', you need to press 'previous' twice to get it to work. Basically, when switching from previous to next, (or next to previous) you need to click the button twice in order to see jquery progress to the next or previous list item. Any ideas how I can fix my jquery to make this work on the first click?

推荐答案

您可以使用类选择器进行此操作.这样就不需要存储全局变量.

You could do this with class selectors. This negates the need for storing global variables.

    $("a.next").click(function(){
        var $toHighlight = $('.active').next().length > 0 ? $('.active').next() : $('#lessonThree li').first();
        $('.active').removeClass('active');
        $toHighlight.addClass('active');
    });

    $("a.prev").click(function(){
        var $toHighlight = $('.active').prev().length > 0 ? $('.active').prev() : $('#lessonThree li').last();
        $('.active').removeClass('active');
        $toHighlight.addClass('active');
    });

http://jsfiddle.net/S79qp/

这篇关于用jquery prev next按钮循环浏览无序列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！