twitter-bootstrap Bootstrap 切换按钮图标和文本同时出现
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19898599/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap toggle button icon and text at the same time
提问by Jhankar Mahbub
I am using Bootstrap 3with Jquery. I have a button that contains an icon in a span tag.(using glypicon of bootstrap)
我使用Bootstrap 3带Jquery。我有一个按钮，在 span 标签中包含一个图标。（使用引导程序的 glypicon）
<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-
谢谢-
回答by Arun P Johny
Try
尝试
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');
});
});
Demo: Fiddle
演示：小提琴
回答by Phil
I'd wrap the text in something identifiable first, eg
我会先用可识别的东西包装文本，例如
<button id="swapArchived" class="btn btn-default btn-sm showArchived">
<span class="glyphicon glyphicon-road"></span>
<span class="text">Show Archived</span>
</button>
Then simply change the attributes / text required
然后只需更改所需的属性/文本
$('#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);
});
回答by nicb
First put the text into another element so it's easier to replace:
首先将文本放入另一个元素中，以便更容易替换：
<button id="swapArchived" class="btn btn-default btn-sm showArchived">
<span class="glyphicon glyphicon-road"></span>
<span>Show Archived</span>
</button>
Then, something like this should work:
然后，这样的事情应该工作：
$('#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);
})
Or, shorter but maybe less readable:
或者，更短但可能不太可读：
$('#swapArchived').click(function(){
$(this).toggleClass("glyphicon-road")
.toggleClass("glyphicon-fire")
.next().text("Show " +
/Inc/.test( $(this).text()) ? "Archived" : "Incomplete");
}
It's not amazingly concise, but it's not bad.
它不是非常简洁，但也不错。
