текст и значок кнопки изменения (шрифт awesome) при нажатии кнопки

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

Вы можете проверить состояние отображения openNewSale с помощью if($("#openNewSale").is(":hidden")) и изменять классы соответственно

$("#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