如何替换 jQueryUI 按钮文本？答案

【问题标题】：How do I replace jQueryUI button text?如何替换 jQueryUI 按钮文本？
【发布时间】：2010-04-19 07:55:44
【问题描述】：

我有一个与 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，因为我不能再把按钮当成黑盒子了，我必须进去。

有没有干净的方法来做到这一点？

【问题讨论】：

标签： jquery jquery-ui button

【解决方案1】：

也许您现在可以改用 jQuery UI 按钮的 label 选项？

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

jsbin preview here

【讨论】：

为清楚起见，您还可以执行以下操作：$(this).button({label:'Stop',icons:{secondary: "ui-icon-circle-close"}}); 如果您还想更改其他内容（例如图标等），这很有帮助。

【解决方案2】：

您可以在更改文本后使用 .button("refresh") 方法。

$("#mybutton").button().toggle( 功能（）{ $(this).text('Stop').button("refresh"); }, 功能（）{ $(this).text('Start').button("refresh"); }, );

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

【讨论】：

我什至试着假装我正在从头开始创建按钮，但它仍然不起作用 $(this).text('Start'); $(this).button();也破坏了按钮
这行得通，但它似乎删除了按钮上的其他现有属性。如果您想要做的只是更改文本同时不理会其他属性，那么 Gnarf 的答案似乎效果最好。

【解决方案3】：

在调用 .button() 制作一个 jQuery UI 按钮后，文本似乎从原始按钮元素中移除并放置在按钮元素内的 <span class = ui-button-text></span> 中。

这样的事情会起作用：

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

【讨论】：

【解决方案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"));
}

【讨论】：

【解决方案5】：

按钮的id总是myButton吗？如果是，那么只需使用

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

【讨论】：

这个 span 是怎么添加的？如果在myButton 内部，那么它显然不起作用。在这种情况下，您可以这样做： $("#myButton span").text('Stop');这相当于您的代码。为什么那个 span inside 是按钮标签呢？听起来不对……
是的。这就是我正在做的事情，但我不想那样做。
嗯...那么跨度的起源是什么？如果不摆脱跨度，我看不出你怎么能以任何其他方式做到这一点。

【解决方案6】：

你需要做.button("refresh")

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

【讨论】：