Question

我在codepen上创建虚拟钢琴作为练习，并且我正在尝试找到一种方法来编写一个jQuery函数，该函数将根据单击的键播放不同的声音。我在一个有序列表中创建了所有键作为列表项，并根据它们的注释给每个键一个id。我已经弄清楚如何根据按下的音符播放声音，我在技术上可以复制每个音符的代码，但我想练习使我的代码更紧凑。这就是我到目前为止所做的：

$('li')
    .mousedown(function(){
    $('#noteC')[0].play();
  })
    .mouseup(function(){
    $('#noteC')[0].pause(); 
    $('#noteC').prop('currentTime',0);
  })

我尝试将var c = $('#noteC')[0]添加到脚本和<li class="ivory" id="C" data-note='c'>C</li>中。我认为可能有某种方法通过将每个声音链接到其列表项来触发它，以便在单击列表项时，JS知道要播放哪个声音。我怎样才能做到这一点？

Answer 1

这里有很多选择，只有一个简单的方法：

为每个li添加数据属性，例如：data-note="noteC"。

然后：

$('li').mousedown(function() {
   $('#'+$(this).data('note'))[0].play();
}).mouseup(function() {
   $('#'+$(this).data('note'))[0].pause();
   $('#'+$(this).data('note')).prop('currentTime',0);
});

编辑：根据您的data-note="c"属性，选择正确的注释，如：

$('#note'+$(this).data('note').toUpperCase()) //etc

基于单击的元素在不同的数据上使用相同的jQuery函数

1 个答案: