0

.click() で互いに交換しようとしている 3 つのボタンがあります:「再生」、「一時停止」、「再開」です。最初のボタン スワップは #play -> #pause から機能しますが、その後、この #pause ボタンは応答しません。

http://jsfiddle.net/YzVJN/

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

$("#start").click(function() {
    $("#start").replaceWith("<button id=\"pause\">Pause</button>");
});

$("#pause").click(function() {
    $("#pause").replaceWith("<button id=\"resume\">Resume</button>");
});

$("#resume").click(function() {
    $("#resume").replaceWith("<button id=\"pause\">Pause</button>");
});​
4

5 に答える 5

3

単純にテキストを変更し、data-属性を追加して現在の状態について詳しく説明します。テキストは将来のバージョンでローカリゼーションと交換される可能性があるためです。

<button class="btn-action" data-action="pause">Pause</button>

その後

$(".btn-action").click(function() {
    var currentAction = $(this).data("action"),
        nextAction = "";

    switch (currentAction)
    {
      case "play": nextAction = "pause"; break;
      case "pause": nextAction = "resume"; break;
      case "resume": nextAction = "play"; break;
    }

    $(this).text(nextAction).data("action", nextAction);
});

ローカリゼーション設定がある場合は、text()次のようなものに簡単に交換できます

$(this).text(actionLocalization[nextAction])

自分自身を繰り返すときは、常に自分のコードを疑ってください...

簡単な例を次に示します: http://jsbin.com/ehonob/1/edit/

于 2012-12-23T21:36:55.143 に答える
2

まず第一に、あなたはおそらくDOM要素を常に再作成したくないでしょう。そもそもすべてをHTMLに入れてから、必要なものを非表示にして表示します。

http://jsfiddle.net/YzVJN/4/

$("#start").click(function() {
    $("#start").hide();
    $("#pause").show();
});

$("#pause").click(function() {
    $("#pause").hide();
    $("#resume").show();
});

$("#resume").click(function() {
    $("#resume").hide();
    $("#pause").show();
});​

DOM要素を再作成する場合、要素は毎回新しい要素になるため$("resume")、スクリプトを最初に実行するときに選択しても何も返されません。この場合、他の人が提案したことを実行し、のようなものを使用しますon('click', '#pause', ...)。

于 2012-12-23T21:33:23.730 に答える
0

on()イベント委任で使用できます：

$("body").on("click", "#start", function() {
    $(this).replaceWith("<button id=\"pause\">Pause</button>");
}).on("click", "#pause", function() {
    $(this).replaceWith("<button id=\"resume\">Resume</button>");
}).on("click", "#resume", function() {
    $(this).replaceWith("<button id=\"pause\">Pause</button>");
});​

代わりに、body他の静的な親要素を使用できることに注意してください。

デモ：http： //jsfiddle.net/YzVJN/5/

于 2012-12-23T21:32:24.323 に答える
0

問題は、バインディングを設定している時点で要素が存在しないことです。

次のように、「live」、「delegate」、または「on」を使用する必要があります。

$(document).on("click", "#pause", function() {
    $("#pause").replaceWith("<button id=\"resume\">Resume</button>");
});
于 2012-12-23T21:35:32.283 に答える
0

本当に要素を削除して追加したい場合は、これを行い、毎回ハンドラーを再登録できます。

$("#start").click(function() {
    $("#start").replaceWith("<button id=\"pause\">Pause</button>");
    $("#pause").click(function() {
        replaceWithResume();
    }); 
});

function replaceWithResume(){
    $("#pause").replaceWith("<button id=\"resume\">Resume</button>");
    $("#resume").click( function() { replaceWithPause() } );
}

function replaceWithPause(){
    $("#resume").replaceWith("<button id=\"pause\">Pause</button>");
    $("#pause").click( function() { replaceWithResume() } );
}
​
于 2012-12-23T21:45:45.273 に答える