Javascript 如何增强这段代码

我现在在做打字辅导。 我用纯HTML编写了简单的键盘模型。 这里有一些HTML

<div class="keyboard">
<div class="keyboardRow"><span class="key" id="q">Q<sub>Й</sub></span>
<span class="key" id="w">W<sub>Ц</sub></span>
<span class="key" id="e">E<sub>У</sub></span>
<span class="key" id="r">R<sub>К</sub></span>
</div>
</div>

---

等等。各位，正如你们所看到的，我的问题是：我如何才能避免意大利面条式的“case”语句，并编写外观美观、可读性好的代码

一种方法是

...
pkey = document.getElementById(String.fromCharCode(KeyID));
pkey.style.backgroundColor = "red";
...

---

此解决方案将密钥代码（如115、119等）转换为相应的字符。由于您的键被标记为ID等于它们所表示的键，因此您只需按ID获取元素，其中ID是字母。

如果您不介意使用jquery，我建议您这样做。由于javascript擅长于面向事件的编程，因此最好以事件方式处理按键

它还促进异步事件处理。这基本上意味着用户可以按多个键，而浏览器不必通过那个巨大的开关语句

另外，jquery键盘方法提供了一个

键

值，其中包含所按下键的字符串表示形式。。因此，您可以通过jquery使用一个事件处理程序函数

例子 这应该适用于每个键。

上的演示

---

所以，亲爱的，我决定用键盘库来解决我的问题：

---

这个问题似乎离题了，因为它应该在上面，这意味着id将和钥匙的字符码匹配，对吗？是的。例如，当您点击字母“s”时，

KeyID

将为115，并且

String.fromCharCode（115）

返回“s”，因此

document.getElementById（“s”）非常感谢！有一个愉快的周末！纯Javascript方法非常适合我。但无论如何，谢谢你的链接：）记住这一点仍然很好。你永远不知道什么时候会有人走到你跟前对你说“嘿！如果你告诉我keydown jquery函数的作用，我会给你100美元”所以，我会在业余时间尽量对你的建议进行适当的权衡，但这段代码也不能处理方括号上的点击：（它只比其他示例短，因为jquery，doc；）
...
pkey = document.getElementById(String.fromCharCode(KeyID));
pkey.style.backgroundColor = "red";
...

$(document).keydown(function(evt) {
 var selector = '#' + evt.key;
 $(selector).css('border-color', 'red');
});

function checkKeyPress(e) { 
  var KeyID = String.fromCharCode(e.charCode).toLowerCase();
  document.getElementById(KeyID).style.border = "solid red";
}
document.onkeypress = checkKeyPress;