Bootstrap同时切换按钮图标和文本(Bootstrap toggle button icon and text at the same time)

 我正在用Jquery使用Bootstrap 3 。 我有一个在span标签中包含图标的按钮（使用引导程序的glypicon） 
 
<button id="swapArchived" class="btn btn-default btn-sm showArchived">
       <span class="glyphicon glyphicon-road"></span> Show Archived
</button>
 
 我想单击时更改图标和文字。 有没有更好的方法，除了， 
 
$('#swapArchived').on('click', function () {
    var $el = $(this);
    if($el.hasClass('showArchived'))
    {
      $el.html('<span class="glyphicon glyphicon-fire"></span> Show Incomplete');
    }
    else
    {      
      $el.html('<span class="glyphicon glyphicon-road"></span> Show Archived');
    }
      $el.toggleClass('showArchived');
  });
 
 我很好奇我是否可以同时切换按钮文本和span类。 尽量避免每次点击都要写满量程。 
 
 谢谢- 

I am using Bootstrap 3 with Jquery. I have a button that contains an icon in a span tag.(using glypicon of bootstrap)
 
<button id="swapArchived" class="btn btn-default btn-sm showArchived">
       <span class="glyphicon glyphicon-road"></span> Show Archived
</button>
 
I want to change the icon and text when clicked. Is there any better way other than, 
 
$('#swapArchived').on('click', function () {
    var $el = $(this);
    if($el.hasClass('showArchived'))
    {
      $el.html('<span class="glyphicon glyphicon-fire"></span> Show Incomplete');
    }
    else
    {      
      $el.html('<span class="glyphicon glyphicon-road"></span> Show Archived');
    }
      $el.toggleClass('showArchived');
  });
 
I was curious whether I can toggle button text and span class at the same time. Trying to avoid writing span on every click.
 
Thanks- 

原文：https://stackoverflow.com/questions/19898599