爲什麼這個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');