如何替換jQueryUI按鈕文本？

Question

我有一個與jQueryUI一起使用的按鈕，就像這樣（簡化）。

<button id="mybutton">Play<button>
<script>
$("#mybutton").button().toggle(
    function(){
       $(this).text('Stop');
    },
    function(){
       $(this).text('Start');
    },
);
</script>

此代碼打破了按鈕的外觀，因為當它進入按鈕小部件時，按鈕內部會添加一個新的跨度。 所以我現在正在更改按鈕值

$(this).find('span').text('Stop');

這是hacky，因為我不能再把按鈕當作黑盒子了，必須進去。

有干凈的方法嗎？

Answer 1

也許您現在可以使用jQuery UI按鈕的label選項？

$("#mybutton").button().toggle(function() {
   $(this).button('option', 'label', 'Stop');
}, function() {
   $(this).button('option', 'label', 'Start');
});

jsbin在這里預覽

Answer 2

更改文本后，可以使用.button（“refresh”）方法。

$("#mybutton").button().toggle(
    function(){
       $(this).text('Stop').button("refresh");
    },
    function(){
       $(this).text('Start').button("refresh");
    },
);

http://jqueryui.com/demos/button/#method-refresh

Answer 3

在調用.button（）來創建一個jQuery UI按鈕之后，文本似乎從原始按鈕元素中刪除並放在按鈕元素中的<span class = ui-button-text></span>中。

像這樣的東西會起作用：

$("#myButton > .ui-button-text").text("New Text");

Answer 4

我不知道你是否還在尋找答案，但我找到了你的問題。 如果查看按鈕中的代碼，jQuery會添加一兩個標記。 因此，我沒有重寫整個事情，而是使用相同的html替換了按鈕.html（） ，但使用了javascript search（）來切換標簽。 這很難看，但它確實有效。 它還使用按鈕標簽正確切換。

var bdef = $(this).html();
var ht = "";
if (bdef.search("Nuevo") != -1) { 
    ht = $(this).html();
    $(this).html(ht.replace("Nuevo", "Lista"));
}
else {
    ht = $(this).html();
    $(this).html(ht.replace("Lista", "Nuevo"));
}

Answer 5

你需要做.button("refresh")

$('#mybutton').text('Save').button("refresh");

Answer 6

按鈕的id總是myButton嗎？ 如果是的話，那就用吧

$("#myButton").text('Stop');