更改InnerHtml的按鈕丟失造型Jquery移動

Question

我有一個函數，我稱之爲「toggleCollapse」按鈕onclick事件。我想在單擊時將按鈕的innet文本從「摺疊」更改爲「展開」。下面的代碼這樣做，但也失去了在該過程中按鈕的所有jquery移動樣式。我怎樣才能刷新按鈕的樣式，而不必重新加載整個頁面，我只想刷新按鈕樣式沒有別的。

<a data-role="button" data-mini="true" data-icon="grid" iconpos="right" onclick="toggleCollapse()">Collapse</a> 

function toggleCollapse() { 
    var a = $("#collapse_value") 
       .attr("value"); 
    var b; 
    if (a == "false") { 

     $("#btnCollapse").html("Expand"); 

     b = true 
    } else { 

     $("#btnCollapse").html("Collapse"); 

    } 


    $('#btnCollapse').button(); 

} 

Answer 1

既然你想「當單擊該按鈕的INNET文本從Collapse改變Expand」中找到，爲什麼不使用，而不是.html()功能.text()功能。

.html()函數映射到innerHTML屬性。

.text()函數映射到innerText屬性。

function toggleCollapse() { 
    var a = !! $('#collapse_value').val(); //use !! to convert value to a boolean 
    $('#btnCollapse').text(a ? 'Expand' : 'Collapse'); 
} 

這應該更換按鈕的文字標籤，而不會影響風格，但是你可以改爲要使用.button()方法改變按鈕標籤（因爲你似乎是使用jQuery UI按鈕）。這裏有一個例子：

function toggleCollapse() { 
    var a = !! $('#collapse_value').val(); //use !! to convert value to a boolean 
    $('#btnCollapse').button('option', 'label', a ? 'Expand' : 'Collapse'); 
} 

Answer 2

我會建議避免內聯onClick調用，因爲如果您需要通過多個頁面/按鈕更改它，可能是管理麻煩。相反，只需將類應用於按鈕/ a href。

<a data-role="button" data-mini="true" data-icon="grid" iconpos="right" class="toggleCollapse btn">Collapse</a> 

(function(){ 

    $('.toggleCollapse').on('click', function(e){ 
     e.preventDefault(); 
     $(this).text(($(this).text() == 'Collapse') ? 'Expand' : 'Collapse'); 
    }); 

$('.btn').button(); 

})()​;​ 

工作示例可以在jsFiddle Example