按鈕點擊更改按鈕文本和圖標文件（字體真棒）

Question

我試圖改變一個按鈕的文本，以及點擊它的相關圖標文件，然後再次點擊時反轉。我有一半的方式，並且能夠切換圖標的類和按鈕的顏色，但是如果我嘗試更改文本或按鈕的html，它將刪除圖標引用。有沒有一種更有效的方式來獲得這一切後

HTML

<button type="button" class="btn btn-success btn-sm" id="newSale"> 
    <i id="iconChange" class="fa fa-plus"></i> add new 
</button> 

的.js

$("#newSale").click(function() { 
    $("#openNewSale").slideToggle("slow", function() { 
    $('#newSale').toggleClass('btn-success').toggleClass('btn-danger'); 
    $('#iconChange').toggleClass('fa-plus').toggleClass('fa-minus'); 
    }); 
}); 

Answer 1

您可以檢查的使用if($("#openNewSale").is(":hidden"))openNewSale顯示狀態，並相應地改變類

$("#newSale").click(function() { 
    $("#openNewSale").slideToggle("slow", function() { 
    $('#newSale').toggleClass('btn-success').toggleClass('btn-danger'); 
     if($("#openNewSale").is(":hidden")) 
     { 
      $("#newSale").html('<i id="iconChange" class="fa fa-plus"></i> add new');  
     } 
     else 
     { 
      $("#newSale").html('<i id="iconChange" class="fa fa-minus"></i> remove'); 
     } 
    }); 
}); 

FIDDLE