javascript - 为什么如果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>

将执行“alert('音频已淡出')”，但由于未运行“$ .each($('audio')，功能”脚本，因此，“alert('音频已停止')” 不执行根本没有“alert('stop function executed')”的提示。我必须将此“每个”脚本用作$('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');