Question

我有一个附有播放按钮的歌曲列表。使用下面的代码，我可以在点击时将“播放”按钮切换为“暂停”，如果单击另一个“播放”链接，原始歌曲将切换回“播放”，新点击的曲目显示“暂停”，因为它应该。

但是，当我点击正在播放的曲目并且按钮变为“暂停”时，再次按下它不会将其切换回“播放”。

基本上我希望图像在点击时切换，如果按下另一个按钮，第一个按钮将恢复为原始状态。

非常感谢任何帮助！

$(function() {
    $('.play').click(function () {

       $('.play').css('background-image', 'url(My Play Button URL)');


       $(this).css('background-image', 'url(My Pause Button URL)');


    });
    });

Answer 1

您可以使用班级来检查当前状态

$(function() {
$('.play').click(function () {

   $('.play').not(this).css('background-image', 'url(My Play Button URL)').removeClass('playing');

    if(!$(this).is('.playing')){
       $(this).css('background-image', 'url(My Pause Button URL)').addClass('playing');
    }


});
});

小提琴：http://jsfiddle.net/arunpjohny/7a4ua/

Answer 2

由Arun P Johny启发的更快更简单的代码片段：

$('.play').click(function ()
{
    return $(this).is('.playing')
    ?
        $(this).css('background-image', 'url(My Play Button URL)').removeClass('playing')
    :
        $(this).css('background-image', 'url(My Pause Button URL)').addClass('playing')
    ;
});

点击jQuery后切换背景图片。多个事件

2 个答案: