将键盘绑定到左/右导航答案

【问题标题】：Bind Keyboard to left/right navigation将键盘绑定到左/右导航
【发布时间】：2012-02-13 03:32:55
【问题描述】：

我是一名摄影师，有一个网站，我无法编辑“模板”结构，但可以上传 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; }});});

这就是我卡住的地方。它不起作用，因为它假定 I 引用的是 href 标记，但引用的是包含它的 li。

任何想法将不胜感激！

【问题讨论】：

您应该设置window.location.href 属性，而不是整个window.location 对象。

标签： javascript jquery keyboard navigation bind

【解决方案1】：

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

【讨论】：

完美运行！谢谢你。你让我从下午开始想起自己的愚蠢

【解决方案2】：

我在 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;
            }
        }
    });
});

【讨论】：

【解决方案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”类的所有列表项为目标，仅此而已 - 它不知道列表项的内容。

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

【讨论】：

【解决方案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; 
        }
    });
});

【讨论】：