如何替换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

也许您现在可以使用labeljQuery UI按钮的选项？

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