如何使用for（）或JavaScript中的其他代码缩短代码？

Question

我想做的事

我想缩短代码。此Drum Play应用程序通过按某些键或用鼠标单击来播放声音。

它可以工作，但是单击事件的代码太长，因为我多次重复了相同的代码。

谁能使它更清洁或更短？

我尝试过的

我尝试了循环，如下所示：

document.querySelector(`div[data-key="${dataKeys[i]}"]`).addEventListener...

但这没有用。

我的当前代码

这是我的代码。

document.querySelector(`div[data-key="${dataKeys[i]}"]`).addEventListener...

---

如果有人可以使我的代码更简洁或更短，我将不胜感激。

Answer 1

选择所有.key元素，检查其数据集以获取其关联的键号，然后可以动态选择关联的audio：

document.querySelectorAll('.key').forEach((div) => {
  div.addEventListener('click', () => {
    const { key } = div.dataset;
    const clickedAudio = document.querySelector(`audio[data-key="${key}"]`);
    clickedAudio.currentTime = 0; // Rewind to the start
    clickedAudio.play();
  });
});