show hide div/play stop audio

Question

我嘗試學習javascript/jquery。 （並對不起我的英語^^） 我必須在我的網頁上顯示或隱藏一些div。沒關係，這與JavaScript正常工作。 但是，例如，當div1可見（顯示：是）我想播放聲音，當它不可見時（顯示：無）停止聲音。 AND 我不想同時播放兩個聲音文件，如果新的div打開，那麼播放聲音文件並停止所有其他聲音。這是個例，但它不工作， 什麼也沒有發生:(感謝您

的Javascript

<script src="jquery-1.11.1.min.js"></script> 

<script type="text/javascript"> 

if($('#mydiv').css('display') == 'block') 
    { 

    $('audio').each(function() { 
     $(this).play(); 
    }); 

} else { 

    $('audio').each(function() { 
     $(this).pause(); 
    }); 

} 

</script> 

HTML

<div id="mydiv" style="display:block"> 
<audio id="audio"> 
<source src="voice.mp3"></source> 
</audio>Hi</div> 


<div id="mydiv2" style="display:none"> 
<audio id="audio2"> 
<source src="voice_2.mp3"></source> 
</audio>Hey</div> 


<div id="mydiv3" style="display:none"> 
<audio id="audio3"> 
<source src="voice_3.mp3"></source> 
</audio>Yep</div> 

Answer 1

從已發明了顯示器：是：d 你可以使用display：block there ..

這裏是所有顯示屬性的鏈接

http://www.w3schools.com/cssref/playit.asp?filename=playcss_display&preval=inline

Answer 2

試試這樣，用Firefox我認爲它需要停止（）而不是暫停，雖然不確定。注意我已經爲第一個div和音頻添加了數字1，如果您認爲合適的話，可以使用它。

$(function(){  
 
$('button').on('click',function(e){ 
 
\t $('audio').each(function(){ 
 
\t \t this.pause(); // Stop playing 
 
\t \t \t this.currentTime = 0; // Reset time 
 
\t \t }); 
 
    $('div').css('display','none'); 
 
    $('#mydiv'+this.innerHTML).toggle(); 
 
\t }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button>1</button><button>2</button><button>3</button><br><br> 
 
<div id="mydiv1" style="display:none">div1 
 
<audio id="audio1" autoplay> 
 
<source src="voice1.mp3"></source> 
 
</audio> 
 
</div> 
 
<div id="mydiv2" style="display:none">div2 
 
<audio id="audio2"> 
 
<source src="voice_2.mp3"></source> 
 
</audio> 
 
</div> 
 
<div id="mydiv3" style="display:none">div 3 
 
<audio id="audio3"> 
 
<source src="voice_3.mp3"></source> 
 
</audio> 
 
</div>

Jsfiddle

取消註釋了暫停和播放，忘了做，用Firefox我認爲它需要停止（），而不是暫停