点击类元素播放不同音频问题求助（无需单独设置ID）

你的问题出在playSound函数里的元素获取逻辑——你错误地从整个btn-audio-lexique元素集合中取firstElementChild，而不是从当前被点击的那个span元素里获取对应的audio标签，这就导致audio变量始终是undefined。

修正后的JavaScript代码 #

我们可以利用事件绑定中的this（或者event.currentTarget）来指向当前被点击的span元素，再获取它的子元素audio：

// 获取所有音频按钮元素
const audioButtons = document.getElementsByClassName("btn-audio-lexique");

function playSound() {
  // this 指向当前被点击的.btn-audio-lexique元素
  const audio = this.firstElementChild;
  // 先检查audio是否存在，再尝试播放
  if (audio) {
    // play()返回Promise，添加catch处理播放失败的情况（比如浏览器自动播放限制）
    audio.play().catch(error => {
      console.error("音频播放失败:", error);
    });
  }
}

// 给每个按钮绑定点击事件
Array.from(audioButtons).forEach(button => {
  button.addEventListener('click', playSound);
});

另一种更明确的写法（使用event.currentTarget） #

如果你觉得this的指向容易混淆，也可以用event.currentTarget来明确获取绑定事件的元素：

const audioButtons = document.getElementsByClassName("btn-audio-lexique");

function playSound(event) {
  const currentButton = event.currentTarget;
  const audio = currentButton.firstElementChild;
  if (audio) {
    audio.play().catch(error => {
      console.error("音频播放失败:", error);
    });
  }
}

Array.from(audioButtons).forEach(button => {
  button.addEventListener('click', playSound);
});

为什么原来的代码不行？ #

你之前的代码里var audio = classname.firstElementChild;，这里的classname是getElementsByClassName返回的元素集合，它的firstElementChild是集合本身的子元素（而不是集合中某个元素的子元素），显然不存在，所以audio就是undefined，控制台才会报错。

这样修改后，点击每个图片所在的span时，都会找到对应的audio标签并播放，完全不需要给每个audio设置单独的ID，符合你的需求。

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