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

这很黑，因为我不能再将按钮视为黑匣子而必须进去。

有干净的方法吗？

Answer 1

也许你现在可以使用jQuery UI按钮的label选项了吗？

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

jsbin preview here

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

按钮的ID始终是myButton吗？如果是，那么只需使用

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

Answer 6

您需要.button("refresh")

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

如何替换jQueryUI按钮文本？

6 个答案: