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

  • 如何取消选中单选button?
  • Angular.js ng-重复跨越多个元素
  • 一个variables是否是undefined
  • .live()vs .bind()
  • jQuery ajax成功callback函数定义
  • 在jQuery中提取Ajax返回数据
  • document.getElementById vs jQuery $()
  • 哪个键码用于jQuery的转义键
  • 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); }