jquery 이전 다음 버튼으로 정렬되지 않은 목록을 반복합니다.

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

클래스 선택기로이 작업을 수행 할 수 있습니다. 따라서 전역 변수를 저장할 필요가 없습니다.

HTML : 는 현재 목록 항목에 현재 클래스를 추가 강조하는

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

CSS

.current { color: red } 

http://jsfiddle.net/S79qp/

Answer 2

이 방법에 대해

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

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