Почему это утверждение if не работает?

Question

У меня есть некоторые div, которые я использую jQuery's fade in/out для вывода на страницу при нажатии ссылки. Каждая страница имеет связанный с ней аудио-элемент 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 »). currentTime = 0 не работает, также не $ ('audio'). Pause(), так как у меня есть несколько звуковых экземпляров на моей странице.

Кто-нибудь знаете, почему это не работает?

Спасибо.

Answer 1

Вы передаете функцию e вашей функции, но не используйте ее. Вероятно, вы хотите предотвратить действие по умолчанию из этого события click.

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');