>我有一点问题。
我在覆盖层上有一个类似 facebook 的盒子窗口。当用户单击喜欢时,此框隐藏 - 显然。我想在此窗口可见时使用音频元素,并在隐藏此窗口时停止音频。所以这是我的html和jquery。请帮助我。
<audio id="audio_player" loop="loop">
<source src="fileadmin/templates/main/crowd.mp3" type='audio/mpeg; codecs="mp3"'>
<source src="fileadmin/templates/main/crowd.ogg" type='audio/ogg; codecs="vorbis"'>
</audio>
$(document).ready(function(){
function audio_player (){
if (
$('fb_like_box').css('display','block')){
$('audio').each(function() {
var song = $(this);
song.play();
});
}
else if (
$('fb_like_box').css('display','none')) {
$('audio').each(function() {
var song = $(this);
song.pause();
});
}
else {}
}
});
你的代码语法错误。
首先,以下语法用于分配值。
$('#fb_like_box').css('display','block')
它将属性block
分配给元素$('#fb_like_box');
如果你想检查它,你可以使用这样的东西:
if($('#fb_like_box').css('display') == 'block') {
// then do something
}
执行您正在尝试的操作的一个好方法是:
if ($('#fb_like_box').is(':visible')) {
$('audio').each(function() {
$(this).play();
});
} else {
$('audio').each(function() {
$(this).pause();
});
}
尝试一些非常基本的东西,比如
$(document).ready(function(){
$('audio')[0].play();
}
如果这运行,至少你知道你走在正确的轨道上。一旦你知道你可以玩它,添加条件,然后测试它们是否正常工作。
使用 :visible 选择器并根据fb_like_box
添加.
或#
。 fb_like_box
不是有效的选择器。假设它是一个 ID
if ($('#fb_like_box').is(':visible')){
// like box visible, play audio
$('audio').each(function() {
var song = $(this);
song.play();
});
}
else {
// like box hidden pause audio
$('audio').each(function() {
var song = $(this);
song.pause();
});
}
主要问题是您应该在隐藏 facebook 字段时运行该功能,因此,您需要将该功能添加到 de 足够的侦听器。我认为在这种情况下,这将是" DOMAttrModified
":
一些伪代码(未测试的代码):
$('facebookelementtohide').addEventListener('DOMAttrModified', function(e){
audio_player ();
}, false);