使用jQuery Bootstrap更改錨文本和圖標

Question

我有這個html代碼：

<a class="btn pull-left" id="btnSelectAll"><i class="icon-plus"></i>
   Select All
</a> 

當我單擊該按鈕時，我需要將文本切換為“全部取消選擇”，並且還將<i>的類別更改為“ icon-minus”，因為每次單擊應在一個或另一個之間切換。 我嘗試在錨點上切換，但沒有用。 我不想對文本進行硬編碼，因為它可以使用其他語言。

這是我嘗試過的：

$("#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');
    }
});

但它不會更改圖標。

Answer 1

只是缺少一些CSS調整， jsfiddle 。

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();

希望對您有所幫助。

Answer 2

看看這個小提琴： http : //jsfiddle.net/YDqZW/

HTML：

<a class="btn pull-left" id="btnSelectAll"><i class="icon-plus"></i>
   Select All
</a> 

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;  
});

Answer 3

嘗試以下一種尺寸：

$("#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");
});