javascript - 单击按钮更改按钮文本和图标文件(字体很棒)

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