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

希望你的问题对你有用。我有一些时间，我总是想拥有自己的记忆游戏。所以我开始构建您想要的功能，完整代码请参阅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();
    }
});

Answer 2

您需要绑定箭头键的事件侦听器并输入，可以从JS / jQ轻松完成

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

用键盘箭头选择并选择div元素并输入键？

2 个答案: