Bootstrap切换按钮图标和文本同时

Question

我使用Bootstrap 3带Jquery.我有一个按钮,在span标签中包含一个图标.(使用bootstrap的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');
  });

我很好奇我是否可以同时切换按钮文本和跨类.试图避免在每次点击时写入跨度.

谢谢-

Answer 1

尝试

jQuery(function ($) {

    $('#swapArchived').on('click', function () {
        var $el = $(this),
            textNode = this.lastChild;
        $el.find('span').toggleClass('glyphicon-fire glyphicon-road');
        textNode.nodeValue = 'Show ' + ($el.hasClass('showArchieved') ? 'Incomplete' : 'Archived')
        $el.toggleClass('showArchieved');
    });
});

演示:小提琴