Question

我尝试学习javascript / jquery。（对不起我的英文^^）我必须在我的网页中显示或隐藏一些div。没关系，这与javascript工作正常。但例如，当div1可见时（显示：是）我想播放声音，当它不可见时（显示：无）停止声音。和我不希望同时播放两个声音文件，如果新的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，并在您认为合适的情况下将其粘在一起。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Jsfiddle

取消注释暂停和播放，忘记这样做，使用Firefox我觉得它需要停止（）而不是暂停

show hide div / play停止音频

2 个答案: