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 に答える