JQuery 代码只播放第一个 div 点击的声音答案

【问题标题】：JQuery code only playing sound for first div clickedJQuery 代码只播放第一个 div 点击的声音
【发布时间】：2013-12-09 21:58:22
【问题描述】：

在刚学习 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 代码检索它。

【问题讨论】：

标签： javascript php jquery audio click

【解决方案1】：

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

这是使用 id 选择器 (id="soundPic")。 ID 必须是唯一的，每页只能有一个。

改成

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

在您的 js 中，以及 class="soundPic" 在您的 html 中；

【讨论】：

【解决方案2】：

问题是您使用 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

【讨论】：

【解决方案3】：

尝试像这样重置音频：

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

【讨论】：

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