將鍵盤綁定到左/右導航

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>

我提到了這個，並設法創建了這個。

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

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