Question

我正在使用jQuery创建一个待办事项列表Web应用程序。我有一个带有空框图标的灰色引导按钮（来自字体真棒）以显示项目不完整。当用户完成任务时，我希望按钮变为绿色，并且图标变为复选框图标（也来自字体awesome）。我可以通过更改类和图标来改变按钮变为绿色，但是当我单击另一个项目以标记为完成时，前一个按钮保持绿色，但是复选的框图标会消失。

基本上，图标的代码将从单击第二个按钮后单击的第一个按钮的代码中删除，但前一个按钮仍保持绿色。当我点击第三个按钮时，第二个按钮也会发生同样的事情。如何让留下来？提前感谢您的帮助。

var checked = $("<i>").addClass("fa fa-check-square-o");

  $("table").on("click", ".btn-default", function(){
    $(this).replaceWith($("<button>").attr("type", "button").addClass("btn btn-success").append(checked));
  });

Answer 1

只需将checked元素放入点击范围

即可

  $(document).on("click", ".btn-default", function(){
      checked = $("<i>").addClass("fa fa-check-square-o");
      $(this).replaceWith($("<button>").attr("type", "button").addClass("btn btn-success").append(checked));
  });

否则它将始终引用相同的元素并将其附加到下一个单击的按钮

Answer 2

尝试简化此行

$(this).replaceWith("<button type='button' class='btn btn-success'><li class='fa fa-check-square-o'></li></button");

Answer 3

将var的声明值移动到单击处理程序中。原因是你每次打电话时都要创建一个元素并移动它.append。

来自.append文档

http://api.jquery.com/append/

＆＃34;如果以这种方式选择的元素被插入到DOM中其他位置的单个位置，它将被移动到目标中（未克隆）＆＃34;

当使用jQuery在按钮中附加字体真棒图标时，当我单击另一个按钮

3 个答案: