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

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'); 
      }
  });
});

小提琴