在点击菜单上播放不同的声音

Question

我正在做一个项目，我需要为菜单上的每个 div 播放不同的音频文件。
我正在使用以下代码：

$(document).ready(function() {  
    var playing = false;  
    $('.punt').click(function() {  
        if (playing == false) {  
            $(this).play();  
            playing = true;  
        } else {  
            $(this).pause();  
            $(this).currentTime=0;  
           playing = false;  
        }  
    });  
});  

和 HTML：

<div class="menu">  
<ul>  
<li><div class="punt primertf">Transecte 1<audio id="player"  src="so/itinerari.mp3"></audio></div></li>  
<li><div class="punt segontf">Transecte 2<audio id="player"  src="so/fontibonun.wav"></audio></div></li>  
<li><div class="punt tercertf">Transecte 3<audio id="player"  src="so/fontibondos.wav"></audio></div></li>  
<li><div class="punt quarttf">Transecte 4<audio id="player"  src="so/fontibontres.wav"></audio></div></li>  
<li><div class="punt cinquetf">Transecte 5<audio id="player"  src="so/fontibonquatre.wav"></audio></div></li>  
</ul>  
</div>  

如果不是（这个）我为每个它工作的类使用不同的类，但我认为它可以比这种方式简单。我做错了什么？

Answer 1

它不起作用的原因是您混淆了$(this)（jQuery object）和this（DOM 元素）。 jQuery 对象没有播放/暂停方法或currentTime 属性。以下是工作代码：

$(document).ready(function() {  
    var playing = false,
        audioPlayers = $('.punt audio');
    $('.punt').click(function() {  
        if (playing == false) {  
            $(this).find('audio').get(0).play();  
            playing = true;  
        } else {  
            audioPlayers.each(function(){
                this.pause();
                this.currentTime=0;
            });  
           playing = false;  
        }  
    });  
});

audioPlayers 是一个缓存的 jQuery 对象，包含所有菜单音频标签。单击菜单项时，我们会检查是否正在播放任何音频。如果不是，那么我们通过查找子 audio 标签来播放所选菜单的音频，使用 .get() 获取匹配的 DOM 元素，然后使用 .play()。

如果音频已经在播放，我们使用.each() 循环遍历每个audio 标签，然后暂停并重置每个标签的当前时间。 this 可以在.each() 循环中使用，因为它直接引用audio 标记。

这是一个工作演示：http://jsfiddle.net/kpk6y1dr/（我还删除了重复的 ids）