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

Question

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

本质上，图标的代码<i class="fa fa-check-square-o"></i>从单击第二个按钮后单击的第一个按钮的代码中删除，但是上一个按钮仍然保持绿色。 当我单击第三个按钮时，第二个按钮也会发生同样的事情。 如何获得<i class="fa fa-check-square-o"></i>留下来？ 在此先感谢您的帮助。

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

只需将选中的元素放入点击范围

  $(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));
  });

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

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/

“如果将以此方式选择的元素插入到DOM中其他位置的单个位置，则它将被移动到目标中（未克隆）”