Question

这是我的基本代码：

<script type="text/javascript">

function play(id){
    $("#player"+id).jPlayer("play", 0);
    $("#jp-play"+id).css("background-color", "#999999");
    $("#jp-pause"+id).css("background-color", "#999999");
    $("#jp-play"+id).css("background-image", "url(images/voice_over/hover.png)");
    $("#jp-pause"+id).css("background-image", "url(images/voice_over/hover.png)");
}

function end(id){
    $("#player"+id).jPlayer("stop");
    $("#jp-play"+id).css("background-color", "#656565");
    $("#jp-pause"+id).css("background-color", "#656565");
    $("#jp-play"+id).css("background-image", "url(images/voice_over/normal.png)");
    $("#jp-pause"+id).css("background-image", "url(images/voice_over/normal.png)");
}
</script>


<div class="jp-audio" onMouseOver="play(\''.$id.'\');" onMouseOut="end(\''.$id.'\');">
    //child elements, id from PHP
</div>

当div跳过时播放音频。有几个div（每个都播放不同的音频）。

但是，将鼠标悬停在每个div中的子元素（如文本）将停止音频。

我知道这与冒泡/传播有关。我正在使用jQuery，只是尝试添加event.stopPropagtion（）;功能但它不起作用。

其他解决方案需要使用.hover（）等。但那我怎样才能获得要播放哪个文件的ID？

我希望这是有道理的。我发现很难解释我的意思。

任何帮助都将不胜感激。

现在我的工作代码是：

var play = function() {
    var id = $(this).attr('file-id');
    $("#player"+id).jPlayer("play", 0);
    $("#jp-play"+id).css("background-color", "#999999");
    $("#jp-pause"+id).css("background-color", "#999999");
    $("#jp-play"+id).css("background-image", "url(images/voice_over/hover.png)");
    $("#jp-pause"+id).css("background-image", "url(images/voice_over/hover.png)");
}

var end = function() {
    var id = $(this).attr('file-id');
    $("#player"+id).jPlayer("stop");
    $("#jp-play"+id).css("background-color", "#656565");
    $("#jp-pause"+id).css("background-color", "#656565");
    $("#jp-play"+id).css("background-image", "url(images/voice_over/normal.png)");
    $("#jp-pause"+id).css("background-image", "url(images/voice_over/normal.png)");
}

$(document).ready(function(){
   $('.jp-audio').hover(play, end);        
});

<div class="jp-audio" file-id="'.$id.'">stuff</div>

在.hover之前设置变量非常重要，尤其是在根据用户输入动态加载内容时。我使用了另外一种方式，当使用innerHTML时，它不起作用。

Answer 1

更好的方法是将$ id设置为html元素的attr

$(document).ready(function(){
   $('.js-audio').hover(play, end);        
});

var play = function() {
   var id = $(this).attr('file-id');
   ....
}

<div class="js-audio" file-id="$id"></div>

onMouseOver / onMouseOut触发Child元素

1 个答案: