如何更改onclick类？

Question

此代码与soundcloud的窗口小部件一起使用，允许远程文本按钮，我试图使其作为一个图像按钮的远程工作，该图像按钮具有不同的图片暂停/播放，取决于选择的类，而不是txt_on_pause txt_on_play。任何想法如何切换？

$(function() { 
    var widgetIframe = document.getElementById('sc-widget'), 
     widget = SC.Widget(widgetIframe), 
     txt_on_pause = '¡Escuchar música!', 
     txt_on_play = 'Escuchando algo de música... (click para pausar)'; 
    widget.bind(SC.Widget.Events.READY, function() { 
     $(".sc-toggle").html(txt_on_pause); 
    }); 
    widget.bind(SC.Widget.Events.PAUSE, function() { 
     $(".sc-toggle").html(txt_on_pause); 
    }); 
    widget.bind(SC.Widget.Events.PLAY, function() { 
     $(".sc-toggle").html(txt_on_play); 
    }); 
    $(".sc-toggle").click(function (e) { 
     e.preventDefault(); 
     widget.toggle(); 
    }); 
}); 

Answer 1

使用addClass和removeClass功能应该工作。

$(function() { 
    var widgetIframe = document.getElementById('sc-widget'), 
     widget = SC.Widget(widgetIframe), 
     txt_on_pause = '¡Escuchar música!', 
     txt_on_play = 'Escuchando algo de música... (click para pausar)'; 

    widget.bind(SC.Widget.Events.READY, function() { 
     $(".sc-toggle") 
      .removeClass('pause') 
      .removeClass('play') 
      .addClass('ready')); 
    }); 
    widget.bind(SC.Widget.Events.PAUSE, function() { 
     $(".sc-toggle") 
      .removeClass('play') 
      .removeClass('ready') 
      .addClass('pause'); 
    }); 
    widget.bind(SC.Widget.Events.PLAY, function() { 
     $(".sc-toggle") 
      .removeClass('pause') 
      .removeClass('ready') 
      .addClass('play'); 
    }); 
    $(".sc-toggle").click(function (e) { 
     e.preventDefault(); 
     widget.toggle(); 
    }); 

});