更改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"); 

10 Solutions collect form web for “更改button文本jQuery的移动”

当你创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"); 
 <a data-role="button" href="#" id="consumed">Mark Old</a> 

你想要:

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

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

我通过这个在线阅读,并认为我可能有一个更简单的解决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改变它们的结构,这也不应该是一个问题。

我写了一个简单的插件来为基于链接的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良好,可重用的代码块。

这适用于我:

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

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

对于像标记一样

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

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

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

例如

$(“#define .ui-btn-text”)。text(“test”);

从JQM 1.3.1开始(可能更早?)simple .text()似乎被支持。

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

出于某种原因,我没有“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); } 
  • 用jQuery获取元素types
  • 使用jQuery和CSS将数字转换为星级显示
  • 如何模糊div元素?
  • 从收音机组中select一个具有值的收音机
  • Chrome中的AJAX发送OPTIONS而不是GET / POST / PUT / DELETE?
  • TypeError:无法读取未定义的属性“setState”
  • 像alert()函数一样停止页面执行
  • JavaScript:使用或不使用jQuery来改变onclick的价值
  • 如何使用开发人员工具在Chrome中findbutton/元素运行的代码
  • jQuery AJAX调用中有没有类似于“finally”的东西?
  • jQuery&CSS - 删除/添加显示:无