Javascript JQuery代码只为单击的第一个div播放声音

在刚刚学习PHP之后，我一直在为自己做一个小项目。基本上，我有一个搜索栏，可以打印出单词及其含义，我试图添加一个按钮来听到他们说话。我得到了一些JS代码，当我点击图片时会播放声音，但问题是它只会在我点击第一张图片时播放。如果我点击一个在加载到表中的最上面一个（我如何返回搜索数据）下面的，那么声音就不会播放。我该怎么做

额外费用

var soundPath = "";
var picturePath = "";

var audio;

$(document).ready(function() {
  $('#soundPic').click(function() {
    console.log("Clicked!");
    var soundPath = $(this).attr('title');

    console.log(soundPath);

    var audio = new Audio(soundPath)
    audio.play();
  });
});

---

PHP代码中将文件路径设置为图片标题，然后我用JS代码检索该标题。

尝试如下重置音频：

audio.pause();
audio.currentTime = 0;

---

问题是，您使用的是ID soundPic

$(document).ready(function() {
  $('#soundPic').click(function() {

因此，它只能在ID为soundPic的一个div上工作。每页只能有一个带有soundPic的ID。如果你还没有为所有的图片上过课，那就给它们上一个声音图片或者任何你想要的东西

$(document).ready(function() {
  $('.sound_pic').click(function() {   // and then you just change it to a class

这是使用一个id选择器（id=“soundPic”）。ID必须是唯一的，每页只能有一个ID

改为

$('.soundPic').click(function()

---

在js中，在html中使用class=“soundPic”

这不是问题所在，因为当我多次单击第一张图片时，声音仍会播放。

$('.soundPic').click(function()