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

【问题标题】：Bootstrap toggle button icon and text at the same timeBootstrap 同时切换按钮图标和文本
【发布时间】：2013-11-22 19:07:43
【问题描述】：

我正在使用Bootstrap 3 和Jquery。我有一个按钮，其中包含跨度标记中的图标。（使用引导程序的 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。

谢谢-

【问题讨论】：

类名showArchieved和showArchived有错别字？
感谢告知错字。

标签： jquery html css twitter-bootstrap twitter-bootstrap-3

【解决方案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');
    });
});

演示：Fiddle

【讨论】：

【解决方案2】：

我会先将文本包装在可识别的内容中，例如

<button id="swapArchived" class="btn btn-default btn-sm showArchived">
    <span class="glyphicon glyphicon-road"></span>
    <span class="text">Show Archived</span>
</button>

然后只需更改所需的属性/文本

$('#swapArchived').on('click', function(e) {
    var btn = $(this),
        icon = btn.find('.glyphicon'),
        text = btn.find('.text'),
        toggleClass = 'showArchived';

    if (btn.hasClass(toggleClass)) {
        icon.removeClass('glyphicon-road').addClass('glyphicon-fire');
        text.text('Show Incomplete');
    } else {
        icon.removeClass('glyphicon-fire').addClass('glyphicon-road');
        text.text('Show Archived');
    }
    btn.toggleClass(toggleClass);
});

【讨论】：

【解决方案3】：

首先将文本放入另一个元素中，这样更容易替换：

<button id="swapArchived" class="btn btn-default btn-sm showArchived">
    <span class="glyphicon glyphicon-road"></span>
    <span>Show Archived</span>
</button>

然后，这样的事情应该可以工作：

$('#footer-top').click(function(){
    var el   = $(this),
        next = el.next(),
        txt  = "Show Incomplete";

    if (/Inc/.test(next.text()))
        var txt = "Show Archived";

    $(this).toggleClass("glyphicon-road")
           .toggleClass("glyphicon-fire");
    next.text(txt);
})

或者，更短但可能不太可读：

$('#swapArchived').click(function(){
    $(this).toggleClass("glyphicon-road")
           .toggleClass("glyphicon-fire")
           .next().text("Show " + 
               /Inc/.test( $(this).text()) ? "Archived" : "Incomplete");
}

虽然不是很简洁，但也不错。

【讨论】：