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

我正在使用jQuery制作一个待办事项列表web应用程序。我有一个灰色的引导按钮，带有一个空框图标（来自font 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));
  });

var checked=$（“”）。addClass（“fa-check-square-o”）；
$（“表”）。在（“单击“，”.btn默认值），函数（）上{
$（this）.replacetwith（$（“”）.attr（“type”，“button”）.addClass（“btn btn success”）.append（选中））；
});

试着简化这一行

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

---

$（this）.replace为（“
”
尝试简化此行

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

$（this）.replaceWith（“
”
只需将选中的元素放入单击范围

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

$（document）.on（“单击“，”.btn default“，函数（）{
选中=$（“”）。addClass（“fa-check-square-o”）；
$（this）.replacetwith（$（“”）.attr（“type”，“button”）.addClass（“btn btn success”）.append（选中））；
});

否则，它将始终引用相同的
元素，并将其附加到下一个单击的按钮中
只需将选中的元素放入单击范围即可

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

$（document）.on（“单击“，”.btn default“，函数（）{
选中=$（“”）。addClass（“fa-check-square-o”）；
$（this）.replacetwith（$（“”）.attr（“type”，“button”）.addClass（“btn btn success”）.append（选中））；
});

否则，它将始终引用相同的
元素并将其附加到下一个单击的按钮中
将var声明签入到单击处理程序中。原因是您正在创建单个元素，并在每次调用时将其移动。附加

来自.append docs


“如果以这种方式选择的元素插入到DOM中其他位置的单个位置，它将被移动到目标位置（未克隆）”
将选中的var声明移动到单击处理程序中。原因是您正在创建单个元素，并在每次调用.append时将其移动

从.append文档


“如果以这种方式选择的元素插入到DOM中其他位置的单个位置，它将被移动到目标位置（未克隆）”
谢谢！不敢相信我忽略了这一点！谢谢！不敢相信我忽略了这一点！