绑定键盘左/右导航

我是一名摄影师，有一个网站，我无法编辑的“模板”结构，但可以上传的JavaScript/CSS等绑定键盘左/右导航

我想下一个/上导航绑定键盘右/左。

链接的结构是：

<div class="image_navigation"> 
     <h4>Image Navigation</h4> 
     <ul> 
     <li class="index"><a href="LINKURL">Index</a></li> 
     <li class="previous"><a href="LINKURL">Previous</a></li> 
     <li class="next"><a href="LINKURL">Next</a></li> 
     </ul> 
    </div>

我提到this和管理，创建此。

$(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。

任何想法将不胜感激！

来源

2012-01-18 tjh

您应该设置'window.location.href'属性而不是整个'window.location'对象。 – Stefan 2012-01-18 12:39:57

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

来源

2012-01-18 12:02:24 pltvs

完美工作！谢谢。你从我的下午提醒了我自己的愚蠢 – tjh 2012-01-18 12:06:29

没问题。你可以投一个答案为正确:) – pltvs 2012-01-18 12:30:07

$(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”）目标与类“下一步”的所有列表项，这就是它 - 它不知道列表项的内容。（$（'li.next a'）or $（li.next'）。find（'a'）） - 您的原始文件代码正在寻找列表项自身的href属性（当然不存在，因为列表项没有href属性）。

来源

2012-01-18 12:02:26 MassivePenguin

您需要定位< a>在< li>内。我看到你正在使用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; 
     } 
    }); 
});

来源

2012-01-18 12:13:45

我发现这个问题上寻找this question愚弄时，决定分享的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; 
      } 
     } 
    }); 
});

来源

2012-10-01 23:11:37 gnarf

绑定键盘左/右导航

回答

相关问题