將箭頭鍵綁定到jQuery導航

Question

為了進行此測試，我有一些基本的html：

<a href="https://www.google.co.uk" class="prev">Previous</a>
<a href="https://jsfiddle.net" class="next">Next</a>

我有一個相當簡單的jquery函數：

var prev = $('.prev');
var next = $('.next');

$('body').on('keydown',function(e){
    if(e.which == 37){
    prev.trigger('click');
  }else if(e.which == 39){
    next.trigger('click');
  }
  console.log(e.which);
  e.preventDefault();
});

控制台正在記錄每個按下的鍵，但是這並沒有將click事件綁定到每個href上，我不確定為什么。

另外我認為使用e.preventDefault(); 正在停止頁面上的其他關鍵操作。 在我的應用程序中的其他keyCode函數中，我沒有使用return false或preventDefault();

是否可以將錨包裹在div中並將keydown僅綁定到該容器，例如：

<div class="nav">
   <a href="https://www.google.co.uk" class="prev">Previous</a>
   <a href="https://jsfiddle.net" class="next">Next</a>
</div>

 $('.nav').on('keydown', function(){} // etc

我在這里有一個jsfiddle： https ://jsfiddle.net/lharby/sva0a4d1/

Answer 1

您可以嘗試以下方法：

$('body').on('keydown',function(e){
    if(e.which == 37){
        $('a.prev')[0].click()
  }else if(e.which == 39){      
        $('a.next')[0].click()
  }

});