我正在使用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');
});
我很好奇是否可以同时切换按钮文本和跨类。试图避免每次点击都写入跨度。
谢谢 -
答案 0 :(得分:14)
尝试
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
答案 1 :(得分:0)
我首先将文本包装成可识别的内容,例如
<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);
});
答案 2 :(得分:0)
首先将文本放入另一个元素中,以便更换:
<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");
}
这并不是非常简洁,但也不错。