更改button文本jQuery的移动

我正在使用新的jQuery Mobile 1.0 alpha 1版本来构build一个移动应用程序，我需要能够切换button的文本。 切换文本工作正常，但只要您执行文本replace的CSS格式化被破坏。

搞砸的格式的屏幕截图： 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"); 

Answer 1

当你创buildbutton时，它会添加一些额外的元素，一些内部的<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> 

要改变文本，你需要这个select器：

 $("#consumed .ui-btn-text").text("Mark New"); 

Answer 2

 <a data-role="button" href="#" id="consumed">Mark Old</a> 

你想要：

 $('#consumed').text('Mark New'); $('#consumed').button('refresh'); 

原因是使您的更改与未来版本的jQuery移动版向后兼容。

Answer 3

我通过这个在线阅读，并认为我可能有一个更简单的解决scheme。 它绝对适用于你正在变成一个button与data-role =“button”属性的链接。

只需将该button的文本放在一个单独的区域中，然后在JavaScript中更改该区域的内容即可。

例如

 <a data-role="button" href="#" id="consumed"><span id="oldBtnText">Mark Old</span></a> 

然后一个简单的

 $('#oldBtnText').html("Old"); 

将做这项工作。 如果jQuery改变它们的结构，这也不应该是一个问题。

Answer 4

我写了一个简单的插件来为基于链接的button或者<input type="button">button做这个。 所以，如果你有

 <input type="button" id="start-button" val="Start"/> 

要么

 <a href="#" data-role="button" id="start-button">Start</a> 

无论哪种方式，您可以更改显示的文字

 $("#start-button").changeButtonText("Stop"); 

这是插件：

 (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); 

…因为在jQuery Mobile如何呈现这些button的时候依赖于你的代码并不是一个好主意。 编程规则：如果你要使用黑客，将其隔离到一个logging良好，可重用的代码块。

Answer 5

这适用于我：

 $('#idOfOriginalButton').prev('.ui-btn-inner').children('.ui-btn-text').html('new text'); 

解决scheme来自： http : //forum.jquery.com/topic/changing-text-works-except-for-buttons

Answer 6

对于像标记一样

 <button id="consumed">Mark Old</button> $("#consumed").html("Mark New"); $("span > span", $("#consumed").parent()).html("Mark New"); 

Answer 7

在新的jquery移动版本中有一个内部的跨度标签内的button。

因此，您不必更改“a”标签的文本，而是更改内部跨度的文本。

例如

$（“#define .ui-btn-text”）。text（“test”）;

Answer 8

从JQM 1.3.1开始（可能更早？）simple .text（）似乎被支持。

Answer 9

对于那些对简单解决scheme感兴趣的人，我创build了一个名为Audero Text Changer的插件。

Answer 10

出于某种原因，我没有“ui-btn-text”分类的跨度，我第一次想改变button文本。 所以我解决这个问题：

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