箭頭鍵庫導航

它應該類似於this

var chosen = ""; 
$(document).keydown(function (e) { // 38-up, 40-down 
    if (e.keyCode == 40) { 
     if (chosen === "") { 
      chosen = 0; 
     } else if ((chosen + 1) < $('li.t').length) { 
      chosen++; 
     } 
     $('li.t').removeClass('selected'); 
     $('li.t:eq(' + chosen + ')').addClass('selected'); 
     $('li.t').click(this); 
     return false; 
    } 
    if (e.keyCode == 38) { 
     if (chosen === "") { 
      chosen = 0; 
     } else if (chosen > 0) { 
      chosen--; 
     } 
     $('li.t').removeClass('selected'); 
     $('li.t:eq(' + chosen + ')').addClass('selected'); 
     $('li.t').click(this); 
     return false; 
    } 
});

...但我想每個箭頭按鍵像一個點擊工作，因爲它應該在iframe中加載頁面，並在同一時間執行再點擊一下的動作（移動黃色框到新選定的縮略圖），就像現在點擊時一樣。

如果用箭頭鍵向下滾動可能會強制滾動以將選定的縮略圖保留在視圖中，那麼這將非常棒。

......如果我得到了這個工作，我想下一個我遇到的問題是，我會失去焦點在主頁和箭頭鍵導航，只要點擊在iframe中的東西。這是一個微不足道的問題，但如果有一個簡單的解決方案，我想使用它。

謝謝。

來源

2013-03-08 Rene Alejandro Hernandez

請縮進代碼發現，它更容易閱讀的方式。 :)你能組合一些演示的形式，展示你如何處理圖像以及它們如何佈置？ – 2013-03-08 23:45:09

那麼，我佈置圖像的方式就是它在上面的「這個圖像庫」鏈接上顯示的方式，你看到了嗎？不知道如何做一個演示。對於我如何離開代碼感到抱歉，對我來說，幾乎不可能讀取它顯示的內容！：/ – 2013-03-09 00:32:11

使用您提供的jsfiddle，可以模擬用戶使用jquery的trigger（）方法單擊。

$('li:eq('+whichIndex+') a').trigger("click");

這將導致您的點擊事件的當前代碼運行。這樣你就不必擔心有邏輯來跟蹤點擊或按鍵。

的Javascript

var chosen = ""; 
$(document).keydown(function(e){ // 38-up, 40-down 
    chosen = $('li.selected').index(); //grab the current selection 
    if (e.keyCode == 40) { 
     if(chosen === "") { 
      chosen = 0; 
     } else if((chosen+1) < $('li').length) { 
      chosen++; 
     } 
     selectImage(chosen); 
     return false; 
    } 
    if (e.keyCode == 38) { 
     if(chosen === "") { 
      chosen = 0; 
     } else if(chosen > 0) { 
      chosen--;    
     } 
     selectImage(chosen); 
     return false; 
    } 
}); 

function selectImage(whichIndex) { 
    $('li:eq('+whichIndex+') a').trigger("click"); 
} 
$("#selection a").click(function() { 
    $('li').removeClass('selected'); 
    $(this).parent().addClass('selected'); 
});

在此示例中，keydown事件簡單地計算出哪些元件應該是下一個「選擇」。一旦找到它，就會調用selectImage（）函數，它基本上模擬鼠標點擊所選元素。

點擊元素（無論是用戶單擊還是通過jquery調用的單擊）將運行取消選擇舊元素並選擇新元素的實際邏輯。

與此工作示例的小提琴可以在這裏http://jsfiddle.net/DPHWZ/

來源

2013-03-10 03:30:33 JuanT

感謝JuanT ...我只是想實現這一點，我注意到，當我添加一個真正的URL到列表項時，它不會加載按鍵上的URL，但它會在點擊時工作。點擊和按鍵不等於;有任何解決這個問題的方法嗎？ – 2013-03-11 05:30:41

這很奇怪，它應該工作。 Theres沒有代碼應該是壓制鼠標點擊或按鍵。你能告訴我你到目前爲止？ – JuanT 2013-03-11 11:36:05

您可以在更新後的jsfiddle [here]（http://jsfiddle.net/DPHWZ/1/）中看到最後兩個列表項具有隻在點擊時加載下面的iframe的URL，而不是在用箭頭鍵選擇時加載... – 2013-03-11 21:44:28

箭頭鍵庫導航

回答

相關問題