DOM元素上的jQuery键盘事件答案

【问题标题】：jQuery keyboard events on DOM elementsDOM元素上的jQuery键盘事件
【发布时间】：2013-02-07 00:29:16
【问题描述】：

我正在构建一个项目，我将在其中有两个 div，它们的 CSS 在不同的单个按键上切换。

我正在使用这个 jQuery 库：https://github.com/jeresig/jquery.hotkeys/

你可以在这里看到一个简单的演示：http://lazarogamio.com/projects/key_test/

这是我的 HTML：

<div class="test_box" id="red"></div>

<div class="test_box" id="green"></div>

我的 CSS：

.test_box {
width: 200px;
height: 200px;
border: 2px solid #000;
margin: 20px;
float: left;
}

.red {
background-color: red;
}

.green {
background-color: green;
}

还有我的 jQuery：

function keymap(){

$(document).bind('keydown', 'r', function (evt){
    $('#red').toggleClass('red');
    });

$(document).bind('keydown', 'g', function (evt){
    $('#green').toggleClass('green');
    });
};

$(document).ready(keymap);

目前，keydown 事件正在工作，但对于每个键和两个 div 都是有效的。我最初让每个 div 由一个单独的函数控制，但我的结果是一样的。我也试图映射其他键什么都不做，无济于事。我的预感是我没有正确定位键，或者可能没有将函数绑定到正确的对象？

【问题讨论】：

标签： jquery keyboard interactive

【解决方案1】：

你包括hotkeys之前你包括jQuery。它需要反过来。目前，您只是像正常一样绑定到keydown，而hotkeys 包含无效。

如果您首先包含 jQuery，它应该可以按预期工作：

http://jsfiddle.net/ExplosionPIlls/GGvrd/

【讨论】：

哇，我不敢相信它这么简单。非常感谢！