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>

如果代替（this）我使用不同的类，它会起作用，但我认为它可以比这种方式简单。我做错了什么？

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，因为它直接引用了id代码。

以下是一个有效的演示：http://jsfiddle.net/kpk6y1dr/（我还删除了重复的{{1}}）

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

1 个答案: