为什么这个if语句不起作用？

Question

我有一些div，我使用jQuery的淡入/淡出，当点击一个链接时带上页面。每个页面都有一个关联的html5音频元素，也相应地淡入/淡出。

$('.link').on('click', function(e){ 
    var targetpage = $($(this).attr("href")); 
    $('.pagecontainer>div').fadeOut(0); //fade out currently displayed page 
    targetpage.fadeIn(); //fade in page associated with link 
    if (targetpage.children().hasClass('backgroundmusic')) { 
     $('audio').animate({volume: 0}, 1000); //fade out currently playing audio 
     alert('audio faded out'); 
     $.each($('audio'), function() { //stop all audio 
      this.currentTime=0; 
      this.pause(); 
      alert('audio stopped'); 
     }); 
     alert('stop function executed'); 
    } 
}); 

$('.sound').on('play', function() { //since volume was faded out, reset volume when click play button 
    $('audio').animate({volume: 1}, 100); 
}); 

HTML：

<a href="#page1" class="link">Audio 1</a> 
<a href="#page2" class="link">Audio 2</a> 
<a href="#page3" class="link">Audio 3</a> 

<div class="pagecontainer"> 

<div id="page1"> //all three audio elements are in exact same spot 
       //clicking page link fades in current audio and fades in new one 
    <div class="backgroundmusic"> 
    <audio controls loop class="sound" preload="none"> 
     <source src="../../site/music/music1.mp3"/> 
     <source src="../../site/music/music1.ogg"/> 
    </audio> 
    </div> 
</div> 

<div id="page2"> 
    <div class="backgroundmusic"> 
    <audio controls loop class="sound" preload="none"> 
     <source src="../../site/music/music2.mp3"/> 
     <source src="../../site/music/music2.ogg"/> 
    </audio> 
    </div> 
</div> 

<div id="page3"> 
    <div class="backgroundmusic"> 
    <audio controls loop class="sound" preload="none"> 
     <source src="../../site/music/music3.mp3"/> 
     <source src="../../site/music/music3.ogg"/> 
    </audio> 
    </div> 
</div> 

</div> 

“警报（ '音频淡出'）” 将执行，但 “警报（ '音频停止'）” 不执行因为它没有运行“$ .each（$（'audio'），function”脚本根本没有“alert（'stop function executed'）”。我必须使用这个“each”脚本作为$（'audio'）。currentTime = 0不起作用，$（'audio'）。pause（）也不起作用，因为我的页面上有多个音频实例。

有没有人知道为什么这不起作用？

谢谢。

Answer 1

您将e传递给您的函数，但不要使用它。可能想要阻止该点击事件的默认操作。

e.preventDefault(); //Put this at the top of the callback 

这应该解决您的.each（）问题。此外，您应该使用控制台而不是警报来冻结您的页面。

console.log('audio faded out'); //Use console instead of alerts 
$('audio').each(function() { //Do it this way. 
    this.currentTime=0; 
    this.pause(); 
    console.log('audio stopped'); 
}); 
console.log('stop function executed');