如何用JavaScript通过单个类/ID+forEach实现多音频点击播放（无多函数）

问题背景 #

我有5个音频文件需要绑定到对应图片上，点击图片时播放指定音频。目前的实现是复制修改函数名写了5个重复函数，搭配不同ID来实现，但希望改用forEach方法获取元素，同时不在HTML元素上直接写脚本（比如value="PLAY"和onclick="function()"这类代码）。

原HTML代码 #

<img src="image1" alt="" class="box rounded shadow-lg cursor-pointer" id="" value="PLAY" onclick="ricekrispy()">
        
<audio id="ricekrispy" src="sound.mp3"></audio>

<img src="image2" alt="" class="box rounded shadow-lg cursor-pointer" id="" value="PLAY" onclick="skittles()">
        
<audio id="skittles" src="sound.mp3"></audio>

<img src="image3" alt="" class="box rounded shadow-lg cursor-pointer" id="" value="PLAY" onclick="Mandms()">
        
<audio id="Mandms" src="audio3.mp3"></audio>

<img src="image4" alt="" class="box rounded shadow-lg cursor-pointer" id="" value="PLAY" onclick="nuggets()">
        
<audio id="nuggets" src="audio4.mp3"></audio>

<img src="image5" alt="" class="box rounded shadow-lg cursor-pointer" id="" value="PLAY" onclick="fries()">
        
<audio id="fries" src="audio5.mp3"></audio>

原JavaScript代码 #

function ricekrispy() {
    let audio = document.getElementById('ricekrispy');
    audio.play();
  }

  function skittles() {
    let audio = document.getElementById('skittles');
    audio.play();
  }

  function mandms() {
    let audio = document.getElementById('mandms');
    audio.play();
  }

  function nuggets() {
    let audio = document.getElementById('nuggets');
    audio.play();
  }

  function fries() {
    let audio = document.getElementById('fries');
    audio.play();
  }

优化方案 #

1. 清理并重构HTML #

移除元素上的onclick和value属性，给每个图片添加自定义数据属性data-audio-id来关联对应音频的ID，同时给所有图片加上统一类名audio-trigger，方便批量获取元素。另外修正原代码中音频ID大小写不一致的问题：

<img src="image1" alt="" class="box rounded shadow-lg cursor-pointer audio-trigger" data-audio-id="ricekrispy">
<audio id="ricekrispy" src="sound.mp3"></audio>

<img src="image2" alt="" class="box rounded shadow-lg cursor-pointer audio-trigger" data-audio-id="skittles">
<audio id="skittles" src="sound.mp3"></audio>

<img src="image3" alt="" class="box rounded shadow-lg cursor-pointer audio-trigger" data-audio-id="mandms">
<audio id="mandms" src="audio3.mp3"></audio>

<img src="image4" alt="" class="box rounded shadow-lg cursor-pointer audio-trigger" data-audio-id="nuggets">
<audio id="nuggets" src="audio4.mp3"></audio>

<img src="image5" alt="" class="box rounded shadow-lg cursor-pointer audio-trigger" data-audio-id="fries">
<audio id="fries" src="audio5.mp3"></audio>

2. 用forEach实现批量事件绑定 #

通过querySelectorAll获取所有触发元素，用forEach遍历并绑定点击事件，点击时通过data-audio-id找到对应音频并播放，同时加入基础错误处理：

// 获取所有带audio-trigger类的图片元素
const audioTriggers = document.querySelectorAll('.audio-trigger');

// 遍历每个元素，绑定点击事件
audioTriggers.forEach(trigger => {
  trigger.addEventListener('click', () => {
    // 从自定义属性中获取关联的音频ID
    const targetAudioId = trigger.dataset.audioId;
    // 获取对应的音频元素
    const audioElement = document.getElementById(targetAudioId);

    if (audioElement) {
      // 播放音频，捕获可能的错误（比如浏览器自动播放限制）
      audioElement.play().catch(error => {
        console.error('音频播放失败:', error);
      });
    } else {
      console.error(`未找到ID为${targetAudioId}的音频元素`);
    }
  });
});

优化要点 #

• 分离关注点：HTML只负责结构，交互逻辑完全交由JS处理，代码更易维护。
• 消除重复代码：通过批量遍历替代重复的函数定义，新增/修改音频绑定只需调整HTML的data-audio-id即可。
• 健壮性提升：加入音频存在性判断和播放错误捕获，避免因元素缺失或浏览器限制导致页面报错。
• 规范命名：统一ID大小写，避免DOM查找时的大小写匹配问题。

内容的提问来源于stack exchange，提问作者Kode