如何将按键存储到变量中以重构此代码？答案

【问题标题】：How can I store key presses into variables to refactor this code?如何将按键存储到变量中以重构此代码？
【发布时间】：2017-08-04 19:25:19
【问题描述】：

我正在尝试构建一个简单的钢琴，以便按键播放相应的声音。我在我的 html 和音频元素中设置了数据属性，如下所示：

<div class="piano-keys">
      <div data-key="65" class="wkey" id="key"></div>
        <div data-key="81" class="bkey" id="key></div>
</div>

<audio id="65" data-key="65" src="notes/261-C.mp3"></audio>
<audio id="83" data-key="83" src="notes/293-D.mp3"></audio>

我的jquery如下：

 $(document).keyup(function(e){
         if(e.keyCode == 65){
             var c = document.getElementById('65');
             c.play();
             c.currentTime = 0;
      } else if(e.keyCode == 83){
            var c = document.getElementById('83');
             cSharp.play();
             cSharp.currentTime = 0;
       }
    });

这显然有效，但我需要 25 个 if/else，而且我知道它可以做得更干净。而不是必须针对个人 ID。我试图为他们的按键创建变量，如下所示：

var key = $('.key[data-key="${e.keyCode}"]');

但这显然从来没有奏效。如果这在舞台上还没有变得非常明显，我是 jquery 的新手。

【问题讨论】：

您是否正在检查 keyCode 以确保它是与您的音频相关联的键？
ID 表示唯一，类表示多个 - 重构您的 ID 和类。 - 你在id="key中也缺少"
另外，键盘适合弹钢琴吗？
使用 keyup 是因为在测试期间我没有通过按键获得正确的键码。

标签： javascript jquery audio addeventlistener

【解决方案1】：

首先，你不能在一个页面上多次使用同一个 ID，除此之外你可以这样做

$(document).keyup(function(e){
    var key = e.which;
    var note =document.getElementById(key);
    note.play();
    note.currentTime = 0;


})

它会播放相应的音频，无论哪个键被按下。我不确定你在用 currentTime 做什么，但你没有在你的问题中提到它，所以这需要适应你正在做的任何事情。

【讨论】：

如果立即再次按下，则需要 currentTime 来重置音频。否则音符将继续播放。

【解决方案2】：

你不能在 HTML 中重复 id 属性

所以，解决办法是：

<div class="piano-keys">
      <div data-key="65" class="wkey key"></div>
        <div data-key="81" class="bkey key"></div>
</div>

而且这一行也有错误，你没有"65" id

var c = document.getElementById('65');

也许 jQuery 选择器对你有用，可以在你的 html 中找到数据键

【讨论】：

这不能回答 OP 的问题