选择并使用键盘箭头选择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(); 
    } 
});