使用 forEach 或使用 JS 循环播放具有相同类或 ID 的多个音频文件答案

【问题标题】：Playing multiple audio files with same class or ID using forEach or for loop using JS使用 forEach 或使用 JS 循环播放具有相同类或 ID 的多个音频文件
【发布时间】：2023-01-23 23:41:52
【问题描述】：

我正在使用这段代码：

HTML（顺风CSS）：

 <img src="https://static9.depositphotos.com/1049691/1080/i/450/depositphotos_10806368-stock-photo-fresh-apples.jpg" alt="" class="\>

记者：

function play() {
var audio = document.getElementById("audio");
audio.play();
}

function deny() {
var deny = document.getElementById("deny");
deny.play();

}

function give() {

var give = document.getElementById("给"); 给.play();

我的 give 和 deny 函数只会播放 1 个音频文件，这很好。而不是制作多个代码或 DRY（不要重复自己），我如何避免重复使用这个播放块 20 次不同的时间，而只是简单地使用 for 循环或 forEach？

我尝试使用：

记者：

    function play() {
    let playAll = document.querySelectorAll('audio');playAll.forEach((item) => {item.onclick = ()    =>  play();
 )}

HTML: 第 1 项：

<img src="https://static9.depositphotos.com/1049691/1080/i/450/depositphotos_10806368-stock-         photo-fresh-apples.jpg" alt="" class="\>

<audio id="audio" src="dist\\assets\\audio\\I Want Apple.mp3"\>\</audio\>

第 2 项：

<img src="https://media.istockphoto.com/photos/marshmallow-crispy-rice-treat-against-white-     background-picture-id453551221?k=20&m=453551221&s=612x612&w=0&h=Q4-w0zgUvkTx56cpkLTz9eUH2UbNRGqiQyND528pDn4=" alt="" class="\>

<audio id="audio" src="dist\\assets\\audio\\I want rice krispy.mp3"\>\</audio\>

Item 1 和 Item 2 都在播放“I want apple”而不是循环播放

【问题讨论】：

标签： javascript foreach

【解决方案1】：

在当前音频元素本身上调用 play。

document.querySelectorAll('audio').forEach(
    item => item.addEventListener('click', () => item.play()));

【讨论】：