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

所以previous()应该是prev()。

您需要存储当前事件元素以跳转到下一个或上一个

以下是触发链接点击的方法:
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;
}