javascript - 基于单击的元素对不同的数据使用相同的jQuery函数

作为练习，我正在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就知道要播放哪个声音。我怎样才能做到这一点？

最佳答案

这里有很多选择，但有一个简单的方法：
为每个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

关于javascript - 基于单击的元素对不同的数据使用相同的jQuery函数，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31686625/