javascript - 使用 forEach 迭代 querySelectorAll 的多个元素

Question

问题如下:我创建了一个单独的 JS 文件，在其中我想迭代属于某个类 audioz 的元素。在我的 JS 代码的第二行中，我在 item 上使用 addEventListener，但是该代码似乎不适用于 item，除非我put document，但结果仍然有缺陷。我在迭代中做错了什么？

JS:

document.querySelectorAll('.audioz').forEach(item => {
    item.addEventListener('keydown', function(e) {
        const ss = document.querySelector(`audio[data-key="${e.keyCode}"]`);
        console.log(ss);
        ss.play();
    })
})

HTML:

<audio class="audioz" data-key="65" src="sounds/clap.wav"></audio>
<audio class="audioz" data-key="83" src="sounds/hihat.wav"></audio>
<audio class="audioz" data-key="68" src="sounds/kick.wav"></audio>
<audio class="audioz" data-key="70" src="sounds/openhat.wav"></audio>
<audio class="audioz" data-key="71" src="sounds/boom.wav"></audio>
<audio class="audioz" data-key="72" src="sounds/ride.wav"></audio>
<audio class="audioz" data-key="74" src="sounds/snare.wav"></audio>
<audio class="audioz" data-key="75" src="sounds/tom.wav"></audio>
<audio class="audioz" data-key="76" src="sounds/tink.wav"></audio>

Answer 1

您当前正在向每个 audio 标记添加一个 keydown 事件监听器。但是，audio 标记是隐藏的，因此您无法对其执行 keydown 事件。因此，您的代码将无法工作。

将事件监听器添加到文档中。

document.addEventListener('keydown', function(e) {
  const ss = document.querySelector(`audio[data-key="${e.keyCode}"]`);
  console.log(ss);
  ss.play();
})

<audio class="audioz" data-key="65" src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3"></audio> press the A key