Question

我使用此代码播放和暂停歌曲样本，页面上有多个实例。我想在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>

Answer 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)将专门指向单击的元素（具有类playback）。因此addClass方法仅将playing类应用于播放的歌曲的链接。（在此示例中，我还使用removeClass在歌曲暂停时删除playing课程。）

如果可能的话，更好的想法是将playbutton.gif和pausebutton.gif组合成一个名为playbackbuttons.gif的36x18图像，然后将CSS更改为：

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

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

（JavaScript仍然与我上面写的相同。）

这样，暂停按钮图像将在首页加载时加载，而不是第一次播放歌曲。

Answer 2

e将引用jQuery.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");
    }
});

我在my demo中使用了color，但您必须更改background-image

添加代码以在播放歌曲时切换图像

2 个答案: