33

我正在使用新的 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");
4

10 回答 10

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");
于 2010-10-24T17:48:36.470 回答
12 
<a data-role="button" href="#" id="consumed">Mark Old</a>

你想要：

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

原因是使您的更改能够向后兼容 jQuery mobile 的未来版本。

于 2012-04-20T15:35:43.023 回答
9

我在线阅读了这个和各种选项，并认为我可能有一个更简单的解决方案。它绝对适用于您正在变成具有 data-role="button" 属性的按钮的链接。

只需将按钮的文本放在一个单独的 span 中，然后在 JavaScript 中更改 span 的内容。

例如

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

然后一个简单的

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

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

于 2012-07-19T13:48:28.720 回答
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，请将其隔离为有据可查、可重用的代码块。

于 2011-09-02T06:18:32.060 回答
3

这对我有用：

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

解决方案来自：http: //forum.jquery.com/topic/changeing-text-works-except-for-buttons

于 2011-10-21T23:00:34.097 回答
1

对于像这样的标记

<button id="consumed">Mark Old</button>

$("#consumed").html("Mark New");
$("span > span", $("#consumed").parent()).html("Mark New");
于 2011-05-30T09:58:58.797 回答
0

在新的 jquery 移动版本中，按钮内有一个内部 span 标签。

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

例如

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

于 2012-08-28T21:16:44.513 回答
0

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

于 2013-01-10T15:29:32.480 回答
0

从 JQM 1.3.1（可能更早？）开始，似乎支持简单的 .text() 。

于 2013-04-11T16:08:51.850 回答
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);
}
于 2013-09-02T21:11:24.470 回答