0

このコードを使用して曲のサンプルを再生および一時停止します。ページには複数のインスタンスがあります。song.play() の後にいくつかのコードを追加して、.playback クラスのみのこのインスタンスの背景画像を pausebutton.gif に変更し、ボタンが再度押されたときに再び playbutton.gif に戻すコードを追加したいと思います。ページに複数のインスタンスがあるため、これはクラスで可能ですか? どんな助けでも大歓迎です。ありがとうございました。

<script type="text/javascript">
$(function() {
$(".playback").click(function(e) {
   e.preventDefault();
   var song = $(this).next('audio').get(0);
   if (song.paused)
     song.play()
   else
     song.pause()
   });
   });


<style>
.playback:link   
{background:url('images/playbutton.gif');display:block;width:18px;height:18px;}
</style>

<a class="playback" href="#"></a><audio id="wonderful"><source src="audio/wonderful.mp3" type="audio/mpeg"  /></audio>
4

2 に答える 2

1

ejQuery.Event オブジェクトを参照するため、$(this) を使用する必要があります。

$(".playback").click(function(e) {
    e.preventDefault();
    var song = $(this).next('audio').get(0);
    if (song.paused) {
        song.play();
        $(this).addClass("playing");
    } else {
        song.pause();
        $(this).removeClass("playing");
    }
});

デモで使用colorしましたが、変更する必要がありますbackground-image

于 2013-07-02T02:39:48.570 に答える
1

CSS に次のように追加できます。

.playback.playing {
    background: url('images/pausebutton.gif');
 }

このスタイルは、クラスplaybackおよびを持つ要素を参照するようになりplayingました。

次に、JavaScript で:

$(".playback").click(function(e) {
    e.preventDefault();
    var song = $(this).next('audio').get(0);
    if (song.paused) {
        song.play();
        $(this).addClass("playing");
    } else {
        song.pause();
        $(this).removeClass("playing");
    }
});

クリック時に発生するように設定された関数内で、クリックされ$(this)た ( class を持つplayback) 要素を具体的に参照します。したがって、このaddClassメソッドは、playing再生された曲のリンクにのみクラスを適用します。(この例では、曲の一時停止時にクラスもremoveClass削除していました。)playing

可能であれば、playbutton.gif と pausebutton.gif を 36x18 の 1 つの画像 (playbackbuttons.gif など) に結合し、CSS を次のように変更することをお勧めします。

.playback:link {
    background: url('images/playbackbuttons.gif');
    display: block;
    width: 18px;
    height: 18px;
}

.playback.playing {
    background-position: right top;
}

(JavaScript は上で書いたものと同じです。)

このように、一時停止ボタンの画像は、曲が最初に再生されたときではなく、ページが最初に読み込まれたときに読み込まれます。

于 2013-07-02T01:53:40.443 に答える