我正在想办法解决这个问题，但还没有解决。所以我想在按键时触发一个声音，然后在字段中显示声音的名称。它必须显示QQ的id作为它的名字。我有两个代码，一个根本不起作用，另一个让我听到按键时的声音，但没有显示声音的名称(我不知道如何实现它(。到目前为止，我的代码是：
jQuery的无效解决方案：
$(".drum-pad").on('keydown', function (e) {
if(e.keyCode === 81){
$(e.target).children('audio.clip')[0].play();
$("#track").text(e.target.id);
}
});
纯JavaScript的半工作解决方案：
document.addEventListener('keydown', function(e) {
if (e.keyCode == 81) {
document.getElementById('Q').play();
}
});
HTML
<div id="drum-machine">
<div id="display">
<p id="track"></p>
</div>
<div id="QQ" class="drum-pad">
<audio src="https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3" class="clip" id="Q"></audio>
Q
</div>
</div>
document上的keydown在jQuery中工作，因此下面的代码应该可以工作。Javascript密钥代码
$(document).on('keydown', function (e) {
if(e.keyCode === 81){
$('#Q').get(0).play();
var text = $("#Q").closest('div').attr('id');
$("#track").text(text);
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="drum-machine">
<div id="display">
<p id="track"></p>
</div>
<div id="QQ" class="drum-pad">
<audio src="https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3" class="clip" id="Q"></audio>
Q
</div>
</div>我认为为每个键写"if"是个坏主意。试试这样的东西：
<div id="drum-machine">
<div id="display">
<p id="track"></p>
</div>
<div id="QQ" class="drum-pad">
<audio id="key-81" data-name="Heater 1" src="https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3" class="clip" ></audio>
Q</div>
</div>
和JS：
document.addEventListener('keydown', function(e) {
var el = document.getElementById('key'+e.keyCode)
el.play()
document.getElementById('track').innerText = el.innerText
});
试试这个：获取播放的音频的父级，并将其文本放在音轨div中。
注意：请在您的代码中包含jquery库
document.addEventListener('keydown', function(e) {
if (e.keyCode == 81) {
document.getElementById('Q').play();
var parent = $("#Q").parent();
$("#track").text(parent.attr("id"));
}
});
为了对所有drum-pad进行通用处理，请使用以下代码
$(document).on('keydown','.drum-pad', function (e) {
if(e.keyCode === 81){
$(this).find("audio").get(0).play();
$("#track").text($(this).attr("id"));
}
});