4

有什么方法可以通过按键盘上的箭头键来导航 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 做一个案例作为起始点，并伴随它应该在 up/down/left/ 中的每个 div正确的事件？

4

2 回答 2

8

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

编辑：对不起，我的脚本中有一些垃圾代码，因为我分叉了我自己的插件基本设置之一，稍后将删除它。

它还没有完成，但今天我会完成它。我将它构建为插件，因为稍后我想添加一些选项。但关键运动的想法应该是清楚的。

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

太多的代码在这里发布，所以这里有一个片段：

$(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();
    }
});
于 2013-03-25T13:07:12.043 回答
0

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

1min google： 在 JS/jQuery 中绑定箭头键

于 2013-03-24T20:39:00.643 回答