0

我试图在 .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>");
});​
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 回答