[英]Change anchor text and icon using jquery bootstrap
I have this html code: 我有这个html代码:
<a class="btn pull-left" id="btnSelectAll"><i class="icon-plus"></i>
Select All
</a>
When I click the button I need to toggle the text to "Deselect All" and also change the class of the <i>
to "icon-minus", for each click should change between one or the other. 当我单击该按钮时,我需要将文本切换为“全部取消选择”,并且还将<i>
的类别更改为“ icon-minus”,因为每次单击应在一个或另一个之间切换。 I tried with toggle on the anchor but didn't work. 我尝试在锚点上切换,但没有用。 I don't want to hardcode the text because it can be in a different language. 我不想对文本进行硬编码,因为它可以使用其他语言。
Here is what I tried: 这是我尝试过的:
$("#btnSelectAll").click(function () {
var $this = $(this);
$this.toggleClass('show');
if ($this.hasClass('show')) {
$this.text('@L.GetLanguageText("DeselectAll")');
$($this +'> i').addClass('icon-minus');
} else {
$this.text('@L.GetLanguageText("SelectAll")');
$($this + '> i').addClass('icon-plus');
}
});
but it doesn't change the icon. 但它不会更改图标。
Just missing a few css adjustments, jsfiddle . 只是缺少一些CSS调整, jsfiddle 。
js: js:
var alterIcon = function()
{
$("#btnSelectAll").click(function() {
var icon = $(this).children("i"),
text = $(this).text();
$(this).text(text == "Deselect All" ? "Select All" : "Deselect All");
$(this).prepend(icon.toggleClass('glyphicon-thumbs-up glyphicon-thumbs-down') );
});
}
alterIcon();
Hope this help. 希望对您有所帮助。
Look at this fiddle: http://jsfiddle.net/YDqZW/ 看看这个小提琴: http : //jsfiddle.net/YDqZW/
html: HTML:
<a class="btn pull-left" id="btnSelectAll"><i class="icon-plus"></i>
Select All
</a>
js: js:
$('#btnSelectAll').on('click', function() {
var notice = 'Select All';
if ( $('#btnSelectAll').text().trim() == notice ) {
notice = 'Deselect All';
}
$('#btnSelectAll').find('i').toggleClass('icon-plus icon-minus').parent().contents().last()[0].textContent = notice;
});
Try this one for size: 尝试以下一种尺寸:
$("#btnSelectAll").on("click", function() {
x = $(this).children()[0];
$(this).text().trim() == "Select All" ? $(this).text("Deselect All").prepend(x) : $(this).text("Select All").prepend(x);
$($(this).children()[0]).toggleClass("icon-plus icon-minus");
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.