javascript - jQuery代码仅在第一个div点击时播放声音

Question

学习PHP之后，我一直在为自己做一个小项目。基本上，我有一个搜索栏，可打印出单词，单词的含义，并且我想添加一个按钮以听到他们所说的话。单击图片时，我得到了一些可以播放声音的JS代码，但问题是，只有单击第一张图片时，它才能播放。如果单击加载到表中最顶部的一个下方的声音(如何返回搜索数据)，则声音将不会播放。我该如何解决？

extras.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代码进行检索。

Answer 1

问题是您使用的是ID soundPic。

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

因此，它仅适用于具有ID soundPic的一个div。每页只能有一个带soundPic的ID。给所有图像一个sound_pic类或您想要的任何类(如果您还没有相应的类)。

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