jquery - 使用 jQuery 在点击时切换背景图像。多个事件

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