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

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

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

基本上，我希望图像切换到点击，如果按下另一个按钮，第一个按钮会恢复到原来的状态

任何帮助都将不胜感激

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

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


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


    });
    });

---

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

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


});
});

---

Fiddle:

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

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


});
});

---

Fiddle:

更快更简单的代码片段，灵感来自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')
    ;
});

---

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

---

因为您正在将单击的按钮设置为“始终播放”模式。您需要检查按钮当前是否正在播放，并基于此设置样式谢谢您的快速响应！在您的小提琴中，当我单击曲目1，然后再次单击它时，它将保持蓝色。我想我的意思是，如何切换播放/暂停功能。最后一个问题……我不确定你是否熟悉Sounclud Stratus播放器，但这就是我正在使用的。一旦曲目播放完毕，有没有办法将图像更改回默认状态？我欠你一杯啤酒！Stratus：因为您正在将单击的按钮设置为“始终播放”模式。您需要检查按钮当前是否正在播放，并基于此设置样式谢谢您的快速响应！在您的小提琴中，当我单击曲目1，然后再次单击它时，它将保持蓝色。我想我的意思是，如何切换播放/暂停功能。最后一个问题……我不确定你是否熟悉Sounclud Stratus播放器，但这就是我正在使用的。一旦曲目播放完毕，有没有办法将图像更改回默认状态？我欠你一杯啤酒！斯特拉特斯：@Graphicd02已在小提琴中修复我看不到任何回调建议我们可以这样做this@Graphicd02Fiddle中已修复我看不到任何回调建议我们可以这样做