更改按钮文本jquery mobile

Question

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

Answer 1

当你创建按钮时,它会添加一些额外的元素,一些内部<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");

Answer 2

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

你想要:

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

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

Answer 3

我在网上阅读了这个和各种选项,并认为我可能有一个更简单的解决方案.它肯定适用于您转换为具有data-role ="button"属性的按钮的链接.

只需将按钮的文本放在单独的范围内,然后在JavaScript中更改范围内容即可.

例如

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

那么简单

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

会做的工作.如果jQuery改变它们的结构,它也应该不是问题.

Answer 4

我写了一个简单的插件来为基于链接的按钮或<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,将它隔离到一个记录良好,可重复使用的代码块.