[英]Bootstrap toggle button icon and text at the same time
我正在使用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');
});
我很好奇我是否可以同時切換按鈕文本和跨類。 試圖避免在每次點擊時寫入跨度。
謝謝-
嘗試
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');
});
});
演示: 小提琴
我首先將文本包裝成可識別的東西,例如
<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);
});
首先將文本放入另一個元素中,以便更換:
<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");
}
它並不是非常簡潔,但它並不壞。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.