Question

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

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

链接的结构是：

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

任何想法都会非常感激！

Answer 1

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

Answer 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;
            }
        }
    });
});

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

$（＆＃39; li.next＆＃39;）定位所有类别为＆＃39; next＆＃39;的列表项目，以及它 - 它不知道内容列表项目。

如果你想要一个标签的href，你需要更深入一些（$（＆＃39; li.next a＆＃39;）或$（li.next＆＃39;）。find（＆＃ 39; a＆＃39;）） - 您的原始代码正在查找列表项本身的href属性（当然不存在，因为列表项不具有href属性）。

Answer 4

您需要定位＆lt; a＆gt;在＆lt; 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; 
        }
    });
});

将键盘绑定到左/右导航

4 个答案: