綁定鍵盤左/右導航

我是一名攝影師，有一個網站，我無法編輯的「模板」結構，但可以上傳的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

綁定鍵盤左/右導航

回答

相關問題