我正在使用新的jquery mobile 1.0 alpha 1版本来构建移动应用程序,我需要能够切换按钮的文本。切换文本工作正常,但是一旦执行文本替换,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");
答案 0 :(得分:67)
当你创建按钮时,它会添加一些额外的元素,一些内部<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>
要更改文字,您需要此选择器:
$("#consumed .ui-btn-text").text("Mark New");
答案 1 :(得分:12)
<a data-role="button" href="#" id="consumed">Mark Old</a>
你想要:
$('#consumed').text('Mark New');
$('#consumed').button('refresh');
原因是为了使您的更改能够与未来版本的jQuery mobile向后兼容。
答案 2 :(得分:9)
我在线阅读了这个和各种选项,并认为我可能有一个更简单的解决方案。它肯定适用于您使用data-role =“button”属性转换为按钮的链接。
只需将按钮的文本放在单独的范围内,然后在JavaScript中更改范围的内容。
e.g。
<a data-role="button" href="#" id="consumed"><span id="oldBtnText">Mark Old</span></a>
然后一个简单的
$('#oldBtnText').html("Old");
将完成这项工作。如果jQuery改变它们的结构,它也应该不是问题。
答案 3 :(得分:8)
我为基于链接的按钮或<input type="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如何呈现这些按钮的依赖关系并不是一个好主意。编程规则:如果你必须使用hack,将它隔离到一个记录良好,可重复使用的代码块。
答案 4 :(得分:3)
这对我有用:
$('#idOfOriginalButton').prev('.ui-btn-inner').children('.ui-btn-text').html('new text');
解决方案来自: http://forum.jquery.com/topic/changing-text-works-except-for-buttons
答案 5 :(得分:1)
用于标记
<button id="consumed">Mark Old</button>
$("#consumed").html("Mark New");
$("span > span", $("#consumed").parent()).html("Mark New");
答案 6 :(得分:0)
在新的jquery移动版中,按钮内有一个内部跨度标记。
所以你不必改变'a'标签的文字,而是改变内跨的文本。
e.g。
$(“#consume .ui-btn-text”)。text(“test”);
答案 7 :(得分:0)
对于那些对简单解决方案感兴趣的人,我创建了一个名为Audero Text Changer的插件。
答案 8 :(得分:0)
从JQM 1.3.1开始(可能更早?),似乎支持简单的.text()。
答案 9 :(得分:0)
出于某种原因,我第一次想要更改按钮文本时没有'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);
}