javascript - クラス onclick を変更するには?

Question

このコードはsoundcloudのウィジェットと連携してリモートテキストボタンを許可し、txt_on_pause txt_on_playとは対照的に、選択したクラスに応じて異なる写真の一時停止/再生を行う1つの画像ボタンのリモートとして機能させようとしています. それを切り替える方法についてのアイデアはありますか？

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

});