バインド右/左のナビゲーションにキーボード

Question

私は写真家だと私は「テンプレート」の構造を編集することができませんが、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を参照しているため、動作しません。

どのようなアイデアも大歓迎です！

Answer 1

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

Answer 2

$(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」）「次へ」のクラスにすべてのリスト項目を対象とそれはそれだ - それは、リスト項目の内容を知らないのです。

タグのhrefが必要な場合は、少し深くする必要があります（$（ 'li.next a'）または$（li.next '）。find（' a '）） - オリジナルコードはリスト項目自体のhref属性を探していました（リスト項目はhref属性を持たないため、存在しません）。

Answer 3

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

Answer 4

で探していると思うものを達成することができ、あなたのコード内の他のすべてが正しいと仮定すると、私はthis questionにdupesを探していたときにこの質問を見つけたと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; 
      } 
     } 
    }); 
});