改變錨文本和圖標使用jquery引導

Question

我有這樣的HTML代碼：

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

當我按一下按鈕我需要切換到「全部取消」，改變它的類<i>到「文本圖標 - 減號「，每次點擊應該在一個或另一個之間改變。我試着用錨點切換，但沒有工作。我不想對文本進行硬編碼，因爲它可以使用不同的語言。

這裏是我的嘗試：

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