如何更改 jQuery 中按钮的文本?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/5580616/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 19:24:35  来源:igfitidea点击:

How to change the text of a button in jQuery?

jqueryjquery-ui

提问by user517406

How do you change the text value of a button in jQuery? Currently, my button has 'Add' as its text value, and upon being clicked I want it to change to 'Save'. I have tried this method below, but so far without success:

你如何更改 jQuery 中按钮的文本值?目前,我的按钮的文本值是“添加”,点击后我希望它更改为“保存”。我在下面尝试过这种方法,但到目前为止没有成功:

$("#btnAddProfile").attr('value', 'Save');

回答by JohnP

Depends on what type of button you are using

取决于您使用的按钮类型

<input type='button' value='Add' id='btnAddProfile'>
$("#btnAddProfile").attr('value', 'Save'); //versions older than 1.6

<input type='button' value='Add' id='btnAddProfile'>
$("#btnAddProfile").prop('value', 'Save'); //versions newer than 1.6

<!-- Different button types-->

<button id='btnAddProfile' type='button'>Add</button>
$("#btnAddProfile").html('Save');

Your button could also be a link. You'll need to post some HTML for a more specific answer.

您的按钮也可以是链接。您需要发布一些 HTML 以获得更具体的答案。

EDIT: These will work assuming you've wrapped it in a .click()call, of course

编辑.click()当然,假设您已将其包装在电话中,这些将起作用

EDIT 2: Newer jQuery versions (from > 1.6) use .proprather than .attr

编辑 2:较新的 jQuery 版本(来自 > 1.6)使用.prop而不是.attr

EDIT 3: If you're using jQuery UI, you need to use DaveUK's method (below) of adjusting the text property

编辑 3:如果您使用的是 jQuery UI,则需要使用 DaveUK 的方法(如下)来调整文本属性

回答by DaveUK

For buttons created with .Button() in jQuery........

对于在 jQuery 中使用 .Button() 创建的按钮........

Whilst the other answers will change the text they will mess up the styling of the button, it turns out that when a jQuery button is rendered the text of the button is nested within a span e.g.

虽然其他答案会更改文本,但它们会弄乱按钮的样式,但事实证明,当呈现 jQuery 按钮时,按钮的文本嵌套在一个范围内,例如

<button id="thebutton">
  <span class="ui-button-text">My Text</span>
</button>

If you remove the span and replace it with text (as in the other examples) - you'll loose the span and associated formatting.

如果您删除跨度并将其替换为文本(如其他示例中所示) - 您将失去跨度和相关格式。

So you actually need to change the text within the SPAN tag and NOT the BUTTON!

因此,您实际上需要更改 SPAN 标签内的文本,而不是 BUTTON!

$("#thebutton span").text("My NEW Text");

or (if like me it's being done on a click event)

或者(如果像我一样它是在点击事件上完成的)

$("span", this).text("My NEW Text");

回答by Sergey

The correct way of changing the button text if it was "buttonized" using JQuery is to use .button() method:

如果使用 JQuery “按钮化”了按钮文本,则更改按钮文本的正确方法是使用 .button() 方法:

$( ".selector" ).button( "option", "label", "new text" );

回答by Sangeet Menon

To change the text in of a button simply execute the following line of jQuery for

要更改按钮的文本,只需执行以下 jQuery 行即可

<input type='button' value='XYZ' id='btnAddProfile'>

<input type='button' value='XYZ' id='btnAddProfile'>

use

$("#btnAddProfile").val('Save');

while for

而对于

<button id='btnAddProfile'>XYZ</button>

<button id='btnAddProfile'>XYZ</button>

use this

用这个

$("#btnAddProfile").html('Save');

$("#btnAddProfile").html('Save');

回答by rsplak

回答by user1464277

You need to do .button("refresh")

你需要做 .button("refresh")

HTML:

HTML:

<button id='btnviewdetails' type='button'>SET</button>

JS:

JS

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

回答by Gluip

If you have button'ed your button this seems to work:

如果您按下了按钮,这似乎有效:

<button id="button">First caption</button>

$('#button').button();//make it nice
var text="new caption";
$('#button').children().first().html(text);

回答by i_emmanuel

$("#btnAddProfile").text("Save");

$("#btnAddProfile").text("Save");

回答by PurplePier

You can use something like this:

你可以使用这样的东西:

$('#your-button').text('New Value');

You can also add extra properties like this:

您还可以添加额外的属性,如下所示:

$(this).text('New Value').attr('disabled', true).addClass('bt-hud').unbind('click');

回答by gotofritz

You can use

您可以使用

$("#btnAddProfile").text('Save');

although

虽然

$("#btnAddProfile").html('Save');

would work as well, but it's misleading (it gives the impression you could write something like

也可以,但它具有误导性(它给人的印象是您可以编写类似

$("#btnAddProfile").html('Save <b>now</b>');

but of course you can't

但你当然不能