選擇並使用鍵盤箭頭選擇div元素並輸入密鑰？

Question

是否有任何方式通過按鍵盤上的箭頭鍵導航div元素的網格，並通過按下Enter鍵「點擊」選定的div？我知道我至少應該嘗試做這項工作，但我完全無法知道如何做到這一點，甚至是可能的。

我知道，如果不使用鼠標，以下將無效，所以我能做些什麼來顯示某種特定的div「焦點」？

.show:hover{ 
    width:94px; 
    height:94px; 
    border:3px solid black; 
} 

.lock{ 
    pointer-events:none; 
} 

任何提示從哪裏開始？我的遊戲在這裏：http://jsfiddle.net/94jerdaw/WXEes/

編輯：

是否可以瀏覽DIV領域，因爲它是從當前位置去「向上」或將我必須做出對每一個DIV作爲的情況下，始發點伴隨着每個div應該在上/下/左/右事件中進行？

Answer 1

您需要綁定事件偵聽器的方向鍵和回車鍵，可以輕鬆地從JS做/ JQ

1分鐘谷歌： Binding arrow keys in JS/jQuery

Answer 2

希望你的問題仍然是有趣的你。我有一段時間，我一直想擁有自己的記憶遊戲。所以我開始構建你想要的功能，完整的代碼請參閱Fiddle。由於小提琴框架，您必須點擊一次遊戲。

編輯：對不起，我的腳本中有一些垃圾代碼，因爲我分配了一個我自己的插件基本設置，稍後會刪除它。

尚未完成，但今天我會完成它。我將它作爲一個插件來構建，因爲後來我想添加一些選項。但關鍵運動的想法應該清楚。

我創建了一個Map-Object（你也可以使用一個數組，我覺得更容易）來找到位置。

太多的代碼在這裏發表了這一切，所以這裏的一個片段：

$(window).keydown(function (e) { 
    //Initial set first card as selected 
    var actCard, nextCard; 

    if ($('.cardset').find('.selected').length < 1) { 
     $('#card1').addClass('selected'); 
    } else { 
     switch (e.which) { 
     case 37: // left 
      $('.cardset').find('.selected').cardMoveHorizont('prev', cardMap); 
      break; 

     case 38: // up 
      $('.cardset').find('.selected').cardMoveHorizont('up', cardMap); 
      break; 

     case 39: // right 
      $('.cardset').find('.selected').cardMoveHorizont('next', cardMap); 
      break; 

     case 40: // down 
      $('.cardset').find('.selected').cardMoveHorizont('down', cardMap); 
      break; 

     default: 
      return; // exit this handler for other keys 
     } 
     e.preventDefault(); 
    } 
});