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

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");
    }
});

我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)将专门引用playback被单击的元素（带有 class ）。因此，该addClass方法将playing只将该类应用于所播放歌曲的链接。（在这个例子中，我还习惯在歌曲暂停时removeClass删除类。）playing

如果可能的话，一个更好的主意是将 playbutton.gif 和 pausebutton.gif 组合成一个 36x18 的图像，例如，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 回答