javascript - 使用键盘箭头选择和选择 div 元素并输入键？

Question

有没有办法通过按键盘上的箭头键在 div 元素的网格中导航，并通过按回车键“单击”所选的 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

希望你的问题对你来说仍然很有趣。我有一些时间，我一直想拥有自己的内存游戏。所以我开始构建您想要的功能，完整代码请参阅 Fiddle .由于 fiddle 框架，您必须在游戏中单击一次。

编辑:抱歉，我的脚本中有一些垃圾代码，因为我 fork 了我自己的插件基本设置之一，稍后将删除它。

还没写完，今天就写完吧。我将它构建为插件，因为稍后我想添加一些选项。但是按键移动的思路要清楚。

我创建了一个 map 对象(您也可以使用数组，我认为更容易)来查找位置。

代码太多，无法全部贴出，这里放一段:

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