如何在正确的元素上执行功能？

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