javascript - 替换 .click() 上的按钮？

Question

我尝试在 .click() 上相互交换三个按钮:“播放”、“暂停”和“恢复”。第一个按钮交换从 #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>");
});​

Answer 1

我只需更改文本，并可能添加一个 data- 属性来告诉我有关当前状态的更多信息，因为 future 版本中的文本可能会与本​​地化进行交换。

<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/