将键盘绑定到左/右导航

我是一名摄影师，有一个网站，我无法编辑’模板’结构，但可以上传javascript / css等。

我想将next / prev导航绑定到键盘右/左。

链接的结构是：

 
Image Navigation
 
 
Index
 
Previous
 
Next
 
  

我提到了这个，并设法创建了这个。

 $(function() {$(document).keyup(function(e) { switch(e.keyCode) { case 37 : window.location = $('li.prev').attr('href'); break; case 39 : window.location = $('li.next').attr('href'); break; }});}); 

这是我被困的地方。 它不起作用，因为它假定我正在引用一个href标记但是引用包含它的li。

任何想法将不胜感激！

Answer 1

 window.location = $('li.next a').attr('href'); 

Answer 2

我在这个问题上寻找欺骗时发现了这个问题，并决定分享我写的一小部分jQuery，以回答为你的选择器修改的那个：

 // when the document is ready, run this function jQuery(function( $ ) { var keymap = {}; // LEFT keymap[ 37 ] = "li.prev a"; // RIGHT keymap[ 39 ] = "li.next a"; $( document ).on( "keyup", function(event) { var href, selector = keymap[ event.which ]; // if the key pressed was in our map, check for the href if ( selector ) { href = $( selector ).attr( "href" ); if ( href ) { // navigate where the link points window.location = href; } } }); }); 

Answer 3

 $(function() {$(document).keyup(function(e) { switch(e.keyCode) { case 37 : window.location = $('li.prev a').attr('href'); break; case 39 : window.location = $('li.next a').attr('href'); break; }});}); 

$（’li.next’）以“next”类为目标列出所有列表项，就是这样 – 它不知道列表项的内容。

如果你想要一个标签的href，你需要更深一些（$（’li.next a’）或$（li.next’）。find（’a’）） – 你的原始代码正在寻找列表项本身的href属性（当然不存在，因为列表项没有href属性）。

Answer 4

您需要定位

中的。 我看到你正在使用jquery [并假设你已经在标题中包含了必要的jquery文件]。

http://api.jquery.com/child-selector/是了解jquery选择器的好地方。

假设代码中的其他所有内容都是正确的，那么您可以实现我认为您正在寻找的内容

 $(function() { $(document).keyup(function(e) { switch(e.keyCode) { case 37 : window.location = $('li.previous a').attr('href'); break; case 39 : window.location = $('li.next a').attr('href'); break; } }); });