javascript - 如何增强这样的代码

Question

我现在正在从事某种打字辅导工作。我有用纯 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>

然后我想更改按下的键的边框颜色。我用 Javascript 创建了这样一段“垃圾代码”

document.onkeypress = checkKeyPress;
function checkKeyPress(e)
{ var KeyID = e.charCode;
  switch (KeyID){
  case 113: pkey = document.getElementById("q");
        pkey.style.borderColor = "red";
        break; 
   case 119: 
   pkey = document.getElementById("w");
   pkey.style.borderColor = "red";
   break; 
   case 101: 
   pkey = document.getElementById("e");
   pkey.style.borderColor = "red";
   break;

............

等等。正如你们所看到的，伙计们，我的问题是:我怎样才能避免意大利面条式的“case”语句并编写看起来漂亮且易于阅读的代码？

Answer 1

实现此目的的一种方法是

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

该解决方案将按键代码(如115、119等)翻译成相应的字符。由于您的键标记的 ID 等于它们所代表的键，因此您只需通过 id 获取元素，其中 id 是字母。