4

完全な jsfiddle サンプルがありますhttp://jsfiddle.net/snijsure/usg8z/3/

基本的に私は以下に示すようにjavascript関数を持っています

function playButtonPress() {

    if (play == false) {
        $("#playbutton").removeClass("icon-play").addClass("icon-stop").button('refresh');

        console.log("playButton pressed play was false show pause button");
        play = true;
    } else {
        $("#playbutton").removeClass("icon-pause").addClass("icon-play").button('refresh');
        console.log("playButton pressed play was true show play button");
        play = false;
    }
}

「再生」と「一時停止」の間でボタン アイコンを切り替えたい。つまり、ユーザーがコンテンツ ボタンを再生している場合は一時停止し、ユーザーがコンテンツを再生していない場合は「再生」にする必要があります。

すべてのJavaScript関数を正しくフックしたようですが、ボタンのアイコンクラスをアイコン再生とアイコン一時停止から変更する方法がわかりません。

ボタンに関連付けられたアイコンをプログラムで変更するにはどうすればよいですか? また、別の動作も見られます。Chrome ではアイコンは変わりますが、サイズは非常に小さいのに対し、Firefox ではアイコンは変わりません。

または、これを行うより良い方法はありますか？

4

4 に答える 4

2

i要素のクラスを変更する必要があります。また、一度に両方のケースを実行できます。

function playButtonPress() {
    $("#playbutton i").toggleClass("icon-stop icon-play");

    console.log("playButton pressed play was "+play);

    play = !play;
}

http://jsfiddle.net/Zxfn8/

于 2013-03-29T16:39:45.470 に答える
0

ドキュメントの準備ができたときにブートストラップがいくつかの要素を初期化するため、再生ボタンの後に一時停止ボタンを表示する必要がありますが、非表示にします。

これを再生ボタンの後に追加します。

<button type="button" id="pauseButton" class="btn" onclick='playButtonPress()'><i class="icon-pause"></i></button>

これをCSSに追加します

#pauseButton{display:none;}

JSは次のようになります

  function playButtonPress() {
    if (!play) {
      $("#playbutton").hide();
      $("#pauseButton").show();
      play = true;
    } else {
      $("#pauseButton").hide()
      $("#playbutton").show();
      play = false;
    }
 }
于 2013-03-29T16:36:24.993 に答える
0

<i>クラスを変更するには、要素を選択する必要があります。たとえば、次のようにします。

$("#playbutton i").removeClass("icon-play").addClass("icon-stop");

またicon-stop、あなたicon-pauseはそれらの1つを決定しました。

ワーキングフィドル。

そして、私はあなたが必要ないと思います$("#playbutton").button('refresh');。

于 2013-03-29T16:29:21.737 に答える
-1

ボタンのアイコンクラスを変更する元のコードでは、<i>タグを変更したいと考えています。

代わりにこれを試してください：

function playButtonPress() {
if (play == false) {
    $("#playbutton i").removeClass("icon-play").addClass("icon-pause");

    console.log("playButton pressed play was false show pause button");
    play = true;
} else {
    $("#playbutton i").removeClass("icon-pause").addClass("icon-play");
    console.log("playButton pressed play was true show play button");
    play = false;
} }

更新されたフィドル

于 2013-03-29T16:36:47.013 に答える