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

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 個解決方案

解決方案1
6 已采納 2019-05-06 10:18:31

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

問題描述

1 個解決方案

解決方案1 6 已采納 2019-05-06 10:18:31

解決方案1
6 已采納 2019-05-06 10:18:31