Question

我有一个带有两个链接的无序列表，一个上一个和下一个按钮。我的目标是：当单击上一个按钮时，上一个列表项将颜色更改为红色。单击下一个项目时，下一个列表项将更改颜色。当最后一个列表项到达并且单击下一个列表项时，它将循环回到第一个列表项（反之亦然，以用于上一个链接）。

到目前为止，我使用下面的jquery / html以95％的速度工作：

<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>

START JQUERY

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

问题是当您按下“下一个”几次然后按“上一个”时，您需要按两次“上一个”才能使其工作。基本上，当从上一个切换到下一个时（或前一个），您需要单击该按钮两次，以便查看到下一个或上一个列表项的jquery进度。任何想法如何我可以修复我的jquery使第一次点击工作？

Answer 1

您可以使用类选择器执行此操作。这消除了存储全局变量的需要。

    $("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/

Answer 2

怎么样：

HTML：将当前类添加到要突出显示的当前列表项

<ul id="myList">
    <li class="current">Ferrari</li>
    ....

CSS

.current { color: red }

和JS

$('a.next').click(function () {
   var cur = $('#myList li.current');
     next = cur.next('li');
   if (next.length === 0) {  // wrap if necessary
       next = $('#myList li:first');
   } 
   cur.removeClass('current');  // move the current class
   next.addClass('current');
});

$('a.prev').click(function () {
  var cur = $('#myList li.current');
     next = cur.prev('li');
   if (next.length === 0) {
       next = $('#myList li:last');
   }      
   cur.removeClass('current');
   next.addClass('current');    
});

使用jquery prev下一个按钮循环遍历无序列表

2 个答案: