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做了什么，但你在你的问题中没有提到它，所以这需要适应你正在做的事情。

Answer 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中找到数据键

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

2 个答案: