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

Question

我正在尝试制作一架简单的钢琴，以便按键可以播放相应的声音。我在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还是陌生的。

Answer 1

首先，您不能在一个页面上多次使用相同的ID，除了可以做类似的事情

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


})

它将播放所按的相应音频。我不确定您在使用currentTime做什么，但是您没有在问题中提及它，因此需要适应此操作。