如何替换jQueryUI按钮文本？

Question

我有一个按钮，我在jQueryUI中使用它，类似于以下代码（简化版）。

I've got a button that I use with jQueryUI somethink like this (simplified).

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

这段代码会破坏按钮的外观，因为当将其转换为按钮小部件时，会在按钮内添加一个新的 span 元素。因此，我现在像这样更改按钮的值：

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

这种方法有些取巧，因为我不能再把按钮当作黑盒子处理，而必须深入其中。

有没有更加简洁的方法可以实现同样的功能呢？

- Andrei R

Answer 1

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

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

点击这里查看jsbin预览

- gnarf

---

为了清晰起见，您可以像这样做：$(this).button({label:'停止',icons:{secondary: "ui-icon-circle-close"}}); 如果您还想更改其他内容，例如图标等，则此方法非常有用。 - roberthuttinger

Answer 2

当您修改文本后，可以使用 .button("refresh") 方法。

$("#mybutton").button().toggle(
    function(){
       $(this).text('停止').button("refresh");
    },
    function(){
       $(this).text('开始').button("refresh");
    },
);

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

- ajpiano

---

我甚至试图假装我是从头开始创建按钮，但它仍然不起作用。$(this).text('开始'); $(this).button();同样会破坏按钮。 - Andrei R

这个方法可以实现，但是似乎会移除按钮上的其他属性。如果你只想改变文本而不影响其他属性，Gnarf的答案似乎是最好的选择。 - Chris

Answer 3

调用 .button() 方法后，jQuery UI 按钮上的文本似乎被移除并放置在一个 <span class = ui-button-text></span> 标签中，该标签位于按钮元素内部。下面这段代码可以达到此效果：

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

- mikehoncho

Answer 4

我不知道你是否还在寻找这个问题的答案，但我找到了你的问题。如果你看一下按钮的代码，jQuery会添加一个或两个标记。所以，我没有重写整个东西，而是用javascript search()替换了按钮.html()相同的HTML来切换标签。虽然有点丑陋，但它起作用了。它还使用按钮标签来正确切换。

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

- Stephen O'Flynn

Answer 5

按钮的ID是否总是myButton？ 如果是，则只需使用

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

- psychotik

---

那个span是怎么加进去的？如果在myButton里面，那显然不会起作用。在这种情况下，你可以这样做：$("#myButton span").text('Stop'); 这等同于你的代码。但是为什么那个span在button标签内部呢？听起来有点不对劲... - psychotik

是的，那就是我正在做的事情，但我不想用那种方式去做。 - Andrei R

那个span的起源是什么？我不知道你怎么能在不删除span的情况下做到这一点。 - psychotik

Answer 6

你需要执行.button("refresh")。

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

- user1464277