jQuery를 사용하여 한 번에 하나의 목록 요소를 표시합니다. "이전"링크가 깨졌습니다

Question

한 번에 하나의 목록 요소를 표시하려고합니다. 이상적으로 사용자가 페이지를 열면 첫 번째 목록 요소가 표시됩니다. 사용자가 "다음"버튼을 클릭하면 첫 번째 목록 요소가 사라지고 두 번째 요소가 나타납니다. 사용자가 "이전"버튼을 클릭하면 이전 요소가 표시됩니다. 지금까지 다음 버튼은 정상적으로 작동하지만 이전 버튼은 li 요소를 스크롤하지만 링크 요소는 계속 발생합니다. 여기에 제가 사용하고있는 코드가 있습니다.

HTML :

<div class="event_months"> 
    <a class="prev" href="#">&#60;</a> 
    <a class="next" href="#">&#62;</a> 
    <li>one</li> 
    <li>two</li> 
</div> 

CSS :

.event_months .noShow { 
    display:none; 
} 

.event_months .doShow { 
    display:inline; 
} 

.event_months .first { 
    display:inline !important; 
​} 

jQuery를 :

<script type = "text/javascript" > $('document').ready(function() { 
    $(".event_months li:nth-child(3)").addClass("doShow"); 

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

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

}); 
</script>​​​​​​ 

Answer 1

이유 왜 다음 작업이 아니라 이전은이

$(".event_months li:nth-child(3)").addClass("doShow"); 

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

$("a.prev").click(function() { 
    $('.first').toggleClass("first"); 
    var $toHighlight = $('.doShow').prev('li').length > 0 ? $('.doShow').prev('li') : $('.event_months li').last(); 
    $('.doShow').removeClass('doShow'); 
    $toHighlight.addClass('doShow'); 
}); 

FIDDLE

Answer 2

변경 :

$('#event_months li') 

~

$('.event_months li') 

클래스 선택기 대신에 ID 선택기를 사용했습니다.