1

再生ボタンが付いている曲のリストがあります。以下のコードを使用すると、クリックすると「再生」ボタンを「一時停止」に切り替えることができます。別の「再生」リンクをクリックすると、元の曲が「再生」に戻り、新しくクリックしたトラックに「一時停止」と表示されます。したほうがいい。

ただし、再生中のトラックをクリックしてボタンが「一時停止」に変わっても、もう一度押しても「再生」に戻りません。

基本的に、クリックすると画像が切り替わり、別のボタンを押すと最初のボタンが元の状態に戻ります。

どんな助けでも大歓迎です！

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

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


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


    });
    });
4

2 に答える 2

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/

于 2013-01-15T03:23:12.193 に答える
0

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')
    ;
});
于 2014-09-17T06:35:11.320 に答える