如何在正確的元素上執行功能？

Question

我正在模板一個帶有卡片列表頁面的 HUGO 網站。 我有來自每張卡內容的音頻文件。 這是html元素：

<audio class="podcast__audio" src="{{ $podcast.RelPermalink }}"></audio>

每張卡都有一個按鈕來播放音頻：

<button class="podcast__player_button">
    <img class="podcast__player_play" src="/images/podcast/play.png">
</button>

在 Javascript 中，我使用此功能播放音頻：

const podcastAudio = document.querySelector('.podcast__audio');

function toggleAudio () {
  if (podcastAudio.paused) {
    podcastAudio.play();

  } else {
    podcastAudio.pause();
  }
}

我在列表頁面上顯示了 4 張卡片，每張卡片都有一個不同的音頻文件可以播放。

我在按鈕上有一個用於事件偵聽器的 for 循環：

const podcastPlayerButton = document.querySelectorAll('.podcast__player_button');

for (let i = 0; i < podcastPlayerButton.length; i++) {
  podcastPlayerButton[i].addEventListener('click', toggleAudio);
}

它工作正常，但它只切換頁面的第一個音頻文件（這是有道理的），但我希望它播放鏈接到每張卡的音頻文件。 第一個podcast__player_button按鈕應該播放第一個podcast__audio文件，第二個按鈕應該播放第二個音頻文件，依此類推。

我想我需要查詢querySelectorAll音頻文件並對其進行迭代？ 如何在正確的音頻文件上執行toggleAudio()函數？

Answer 1

好的，因為按鈕和音頻文件具有相同的索引，此代碼有效：

for (let i = 0; i < podcastPlayerButton.length; i++) {
  podcastPlayerButton[i].addEventListener('click', function () {
    if (podcastAudio[i].paused) {
      podcastAudio[i].play();
    } else {
      podcastAudio[i].pause();
    }
  })
};