Question

我想做什么

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

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

谁能使它更清洁或更短？

我尝试的内容

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

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

但这没用。

我的当前代码

这是我的代码。

<body>

  <div class="keys">
    <div data-key="65" class="key">
      <kbd>A</kbd>
      <span class="sound">clap</span>
    </div>
    <div data-key="83" class="key">
      <kbd>S</kbd>
      <span class="sound">hihat</span>
    </div>
    <div data-key="68" class="key">
      <kbd>D</kbd>
      <span class="sound">kick</span>
    </div>
    ...

  </div>

  <audio data-key="65" src="sounds/clap.wav"></audio>
  <audio data-key="83" src="sounds/hihat.wav"></audio>
  <audio data-key="68" src="sounds/kick.wav"></audio>
  ...

<script>
  window.addEventListener('keydown', function(e) {
    const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
    if (!audio) return; // Stop the function from running all together
    audio.currentTime = 0; // Rewind to the start
    audio.play();
  });

  document.querySelector('div[data-key="65"]').addEventListener('click', function(e) {
    console.log('I clicked.')
    const clickedAudio = document.querySelector(`audio[data-key="65"]`);
    clickedAudio.currentTime = 0; // Rewind to the start
    clickedAudio.play();
  });

  document.querySelector('div[data-key="83"]').addEventListener('click', function(e) {
    console.log('I clicked.')
    const clickedAudio = document.querySelector(`audio[data-key="83"]`);
    clickedAudio.currentTime = 0; // Rewind to the start
    clickedAudio.play();
  });

  document.querySelector('div[data-key="68"]').addEventListener('click', function(e) {
    console.log('I clicked.')
    const clickedAudio = document.querySelector(`audio[data-key="68"]`);
    clickedAudio.currentTime = 0; // Rewind to the start
    clickedAudio.play();
  });
  ...

</script>

</body>

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

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();
  });
});

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

1 个答案: