0

这是我的基本代码：

<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 时它不起作用。

4

1 回答 1

2

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

$(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>
于 2011-08-22T10:39:34.000 回答