通过无序列表循环jQuery prev next按钮

Question

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

到目前为止，我有这95％使用以下的jQuery/HTML工作：

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