按钮点击更改按钮文本和图标文件（字体真棒）

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