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

Posted 2023-02-25

【中文标题】附加代码以在播放歌曲时切换图像

【英文标题】：Append code to toggle image when song is playing

【发布时间】：2013-07-02 01:31:31

【问题描述】：

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

【参考方案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 组合成一个 36x18 的图像，例如，playbackbuttons.gif，并将您的 CSS 更改为：

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


.playback.playing 
    background-position: right top;

（JavaScript 仍然和我上面写的一样。）

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

【讨论】：

感谢您回答我关于多个实例的问题并建议使用单个图像 CSS。我已经这样做了，并结合了下面的 $(this) 建议，这是一件很美好的事情。我想我一直在想我必须真正改变代码中的图像——从没想过改变类。谢谢！

【参考方案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

【讨论】：

是的，$(this) 是必要的。感谢您的演示 - 使用 html 而不是图像查看您的示例让我想到了我必须做的另一个页面！所以谢谢！这里真的很难选择正确的答案。

不确定我为什么选择 e...$(this) 是绝对正确的。我正在更新我的答案，没有理由不更新。

我唯一不能理解的是：为什么我要给提问者提供新思路，帮助别人改错答案，但还是接受了他的答案，而不是我的答案