如何在正确的元素上执行一个函数？

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

如何在正确的元素上执行一个函数？

How to execute a function on the right elements?

javascript

dom