當使用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中其他位置的單個位置，則它將被移動到目標中（未克隆）”