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

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

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

更改为

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

在你的js中，而class =“soundPic”在你的HTML中;

Answer 2

尝试像这样重置音频：

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

Answer 3

问题是你使用的是一个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

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

3 个答案: