使用 forEach 遍历 querySelectorAll 的多个元素答案

【问题标题】：Iterate through multiple elements of querySelectorAll with forEach使用 forEach 遍历 querySelectorAll 的多个元素
【发布时间】：2022-01-18 20:44:42
【问题描述】：

问题如下：我创建了一个单独的JS文件，我想在其中迭代属于某个类audioz的元素。在我的 JS 代码的第二行中，我在item 上使用了addEventListener，但是代码似乎不适用于item，除非我输入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>

【问题讨论】：

audio 标签已隐藏。你不能对其执行keydown事件。
试着一步一步分解。您正在查询某个类的所有元素。对于每个结果，您正在创建一个侦听器来控制台仅记录另一个查询的结果。内部循环是否符合您的预期？

标签： javascript foreach jquery-selectors addeventlistener

【解决方案1】：

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

改为将事件侦听器添加到文档中。

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

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

【讨论】：

【解决方案2】：

您可以将侦听器附加到每个 <audio> 的父元素。这避免了文档级别的一些事件污染。

const audiozResults = document.getElementsByClassName("audioz");
for (const result of audiozResults) {
  const dataKey = +result.getAttribute("data-key");
  result.parentElement.addEventListener("keydown", evt => {
    if (evt.keyCode === dataKey) {
      result.play();
    }
  });
}

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

【讨论】：