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

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