jquery - 使用 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. 所以 previous() 应该是 prev()。
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;
}