jQuery를 사용하여 위 또는 아래 키의 이전 또는 다음 요소로 이동

Question

화살표 키를 위아래로 이동하려고합니다. 위쪽 또는 아래쪽 화살표를 누를 때마다 다음 또는 이전 항목에 대한 클릭을 트리거해야하지만 jQuery는 좋지 않습니다. . .

$('body').on("keyup", function(e) { 

       var code = e.which; 
       if (code == 40) { 

       e.preventDefault();  
       // down here 
       $('.cv_item').next().trigger("click"); 

       } else if (code == 38) { 

       e.preventDefault();  
       // up here 
      $('.cv_item').previous().trigger("click"); 
       } 
      }); 

업데이트 : FIDDLE

Answer 1

1. 그래서 이전() 이전이어야한다().
2. 당신은 다음 또는 이전
3. 로 이동 현재 활성 요소를 저장해야 그리고 여기 링크를 클릭을 유발하는 방법입니다 : jQuery.trigger('click') not working

그리고 JSFIDDLE :

$currentLi = $('.cv_item').last().closest('li'); 

$('body').on("keyup", function(e) {    
    var code = e.which; 

    if (code == 40) { 
     e.preventDefault();  
     // down here 
     $currentLi = $currentLi.next(); 
     if ($currentLi.length==0) 
     $currentLi = $('.cv_item').first().closest('li'); 

     $('.cv_item').removeClass('active-link'); 

     $link = $currentLi.find('.cv_item'); 
     $link.addClass('active-link');  
     $link[0].click(); 

     } else if (code == 38) { 
     e.preventDefault();  
     // up here 
     $currentLi = $currentLi.prev(); 
     if ($currentLi.length==0) 
     $currentLi = $('.cv_item').last().closest('li'); 

     $('.cv_item').removeClass('active-link'); 

     $link = $currentLi.find('.cv_item'); 
     $link.addClass('active-link');  
     $link[0].click(); 

    } 
}); 

업데이트 : CSS 클래스를 <a> 요소에 추가하기 위해 스크립트가 변경되어 클래스 정의가 간단합니다 :

a.active-link { 
    color: #0f0; 
}