要在循环中运行js

Question

var pause = document.querySelector(".pause1");
var audio = document.querySelector(".audio1");
function togglePlay() {
if (audio.paused) {
audio.play();
pause.innerHTML = "🔊";
} else {
audio.pause();
pause.innerHTML = "🔇";
pause.style.color = " #a80000";
}
}

<li class="mp3-views">
<div class="views-field mp3-play">
<div class="pause1" onclick="togglePlay()">▶</div>
<div class="player">
<audio class="audio1" src="assets/images/audio.mp3" type="audio" loop=""></audio>
</div>
</div>
</li>

我想在循环中运行这段代码，因为播放按钮在'li'中重复，我不确定如何做到这一点

Answer 1

一种解决方案是将事件处理程序放在容器上，然后最接近地使用它来获取父元素和音频。这将允许您根据需要添加和删除尽可能多的音频剪辑，而无需为每个音频剪辑添加单击处理程序。

players.addEventListener("click", function(event) {
let li = event.target.closest(".mp3-views");
if (li) {

let pause = li.querySelector(".pause1");
let audio = li.querySelector(".audio1");

if (audio.paused) {
audio.play();
pause.innerHTML = "🔊";
} else {
audio.pause();
pause.innerHTML = "🔇";
pause.style.color = " #a80000";
}
}
});

<ul id="players">
<li class="mp3-views">
<div class="views-field mp3-play">
<div class="pause1">▶</div>
<div class="player">
<audio class="audio1" src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mp3" loop=""></audio>
</div>
</div>
</li>
<li class="mp3-views">
<div class="views-field mp3-play">
<div class="pause1">▶</div>
<div class="player">
<audio class="audio1" src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3" type="audio" loop=""></audio>
</div>
</div>
</li>
<li class="mp3-views">
<div class="views-field mp3-play">
<div class="pause1">▶</div>
<div class="player">
<audio class="audio1" src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3" type="audio" loop=""></audio>
</div>
</div>
</li>
</div>