更改按钮文本 jquery mobile
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4009524/
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
Change button text jquery mobile
提问by Josh Rickard
I'm using the new jquery mobile 1.0 alpha 1 release to build a mobile app and I need to be able to toggle the text of a button. Toggling the text works fine, but as soon as you perform the text replacement the css formatting gets broken.
我正在使用新的 jquery mobile 1.0 alpha 1 版本来构建移动应用程序，我需要能够切换按钮的文本。切换文本工作正常，但是一旦执行文本替换，css 格式就会被破坏。
Screenshot of the messed up formatting: http://awesomescreenshot.com/03e2r50d2
混乱格式的屏幕截图：http: //awesomescreenshot.com/03e2r50d2
<div class="ui-bar">
<a data-role="button" href="#" onclick="Podcast.play(); return false" id="play">Play</a>
<a data-role="button" href="#" onclick="Podcast.download(); return false" id="download">Download</a>
<a data-role="button" href="#" onclick="Podcast.consumed(); return false" id="consumed">Mark Old</a>
</div>
$("#consumed").text("Mark New");
回答by Nick Craver
When you create the button it adds some additional elements, some inner <span>elements that look like this:
当你创建按钮时，它会添加一些额外的元素，一些<span>看起来像这样的内部元素：
<a data-role="button" href="#" onclick="Podcast.consumed(); return false" id="consumed">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">Mark Old</span>
</span>
</a>
To change the text, you'll want this selector:
要更改文本，您需要使用此选择器：
$("#consumed .ui-btn-text").text("Mark New");
回答by Steven de Salas
<a data-role="button" href="#" id="consumed">Mark Old</a>
You want to:
你想要：
$('#consumed').text('Mark New');
$('#consumed').button('refresh');
The reason is to enable your changes to be backwards-compatible with future versions of jQuery mobile.
原因是使您的更改能够向后兼容 jQuery mobile 的未来版本。
回答by Britic
I read through this and various options online and think I may have a simpler solution. It definitely works for links you are turning into a button with the data-role="button" attribute.
我在网上通读了这个和各种选项，并认为我可能有一个更简单的解决方案。它绝对适用于您正在变成具有 data-role="button" 属性的按钮的链接。
Simply put the text of the button in a separate span, and then change the contents of the span in your JavaScript.
只需将按钮的文本放在单独的跨度中，然后在您的 JavaScript 中更改跨度的内容。
e.g.
例如
<a data-role="button" href="#" id="consumed"><span id="oldBtnText">Mark Old</span></a>
Then a simple
然后一个简单的
$('#oldBtnText').html("Old");
Will do the job. It also shouldn't be a problem if jQuery changes their structure.
会做这项工作。如果 jQuery 改变它们的结构，这也不应该是一个问题。
回答by Leopd
I wrote a simple plugin to do this for either a link based button, or an <input type="button">button. So if you have
我编写了一个简单的插件来为基于链接的按钮或<input type="button">按钮执行此操作。所以如果你有
<input type="button" id="start-button" val="Start"/>
or
或者
<a href="#" data-role="button" id="start-button">Start</a>
Either way, you can change the displayed text with
无论哪种方式，您都可以更改显示的文本
$("#start-button").changeButtonText("Stop");
Here's the plugin:
这是插件：
(function($) {
/*
* Changes the displayed text for a jquery mobile button.
* Encapsulates the idiosyncracies of how jquery re-arranges the DOM
* to display a button for either an <a> link or <input type="button">
*/
$.fn.changeButtonText = function(newText) {
return this.each(function() {
$this = $(this);
if( $this.is('a') ) {
$('span.ui-btn-text',$this).text(newText);
return;
}
if( $this.is('input') ) {
$this.val(newText);
// go up the tree
var ctx = $this.closest('.ui-btn');
$('span.ui-btn-text',ctx).text(newText);
return;
}
});
};
})(jQuery);
... because sprinkling your code with dependencies on exactly how jQuery Mobile renders these buttons is not a good idea. Programming rule: if you gotta use a hack, isolate it to a well-documented, re-usable chunk of code.
...因为在您的代码中添加依赖于 jQuery Mobile 呈现这些按钮的方式并不是一个好主意。编程规则：如果您必须使用 hack，请将其隔离为记录良好、可重用的代码块。
回答by Yuval A.
This works for me:
这对我有用：
$('#idOfOriginalButton').prev('.ui-btn-inner').children('.ui-btn-text').html('new text');
solution from: http://forum.jquery.com/topic/changing-text-works-except-for-buttons
解决方案来自：http: //forum.jquery.com/topic/changed-text-works-except-for-buttons
回答by Vikas
For markup like
对于像这样的标记
<button id="consumed">Mark Old</button>
$("#consumed").html("Mark New");
$("span > span", $("#consumed").parent()).html("Mark New");
回答by letsdev-cwack
In the new jquery mobile version there is an inner span tag within the button.
在新的 jquery 移动版本中，按钮内有一个内部 span 标记。
So you have not to change the text of the 'a' tag but to change the text of the inner span.
因此，您不必更改“a”标签的文本，而是更改内部跨度的文本。
e.g.
例如
$("#consumed .ui-btn-text").text("test");
$("#consumed .ui-btn-text").text("test");
回答by Aurelio De Rosa
For those interested in a easy solution, I created a plugin called Audero Text Changer.
对于那些对简单解决方案感兴趣的人，我创建了一个名为Audero Text Changer的插件。
回答by Peter
As of JQM 1.3.1 (maybe earlier?) simple .text() seems to be supported.
从 JQM 1.3.1（也许更早？）开始，似乎支持简单的 .text() 。
回答by Plamen
For some reason I am not having an 'ui-btn-text' classed span the first time I want to change the button text. So I workaround it like this:
出于某种原因，我第一次想更改按钮文本时没有“ui-btn-text”分类跨度。所以我像这样解决它：
var button = $("#consumed");
var innerTextSpan = button.find(".ui-btn-text");
// not initialized - just change label
if (innerTextSpan.size() == 0) {
button.text(label);
// already initialized - find innerTextSpan and change its label
} else {
innerTextSpan.text(label);
}
