用键盘箭头选择并选择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

希望你的问题仍然有趣.我有一些时间,我总是想拥有自己的记忆游戏.所以我开始构建你想要的功能,完整的代码看到小提琴.由于小提琴框架,你必须在游戏上点击一次.

编辑:抱歉,我的脚本中有一些垃圾代码,因为我为插件分配了一个自己的基本设置,稍后会将其删除.

它尚未完成,但今天我将完成它.我把它建成一个插件,因为后来我想添加一些选项.但关键运动的想法应该是明确的.

我创建了一个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();
    }
});