更改按钮文本 jquery mobile

Posted 2023-05-09

【中文标题】更改按钮文本 jquery mobile

【英文标题】：Change button text jquery mobile

【发布时间】：2011-04-29 21:36:20

【问题描述】：

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

【问题讨论】：

你为什么在 html 中使用 onclick 和 jQuery?

【参考方案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");

【讨论】：

应该有更好的方法来实现这一点，例如使用$('ul').listview('refresh'); 调用来更新列表。尽管所描述的方式有效，但它考虑了元素最终布局的内部知识。这个实现细节将来可能会改变。但由于 jquery mobile 仍处于 alpha 阶段，+1 为务实的解决方案。

我遇到了这个问题，因为最初的问题有点误导（尽管尼克的回答是正确的）。但我只想补充一点，对于其他使用实际 研究相同问题的人，该方法不适用于 元素，仅适用于具有 data-role="button" 的 ，也见github.com/jquery/jquery-mobile/issues/2544

-1 > 这里的正确做法是在 DOM 更新后运行 $('#myButton').button('refresh')。

@StevendeSalas - 在给出这个答案时，这不是行为，它没有效果 - 在这种情况下，您应该编辑答案以表明更新/更好的方法已经添加到库中.

当我投票否决这个答案时，我添加了正确答案，它在底部未被注意到。

【参考方案2】：

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

你想：

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

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

【讨论】：

此方法失败，并出现“未捕获的异常：无法在初始化之前调用按钮上的方法；尝试调用方法‘刷新’”时，我尝试此操作（Firefox 12.0）。接受的答案对我有用。使用 jQM 1.1.0 和 jQ 1.7.1。

接受的答案有点拙劣，尽管它可以工作，但您希望尽可能多地使用 jQuery API 以确保未来的兼容性。初始化按钮后，此答案将正常工作，请确保将代码包装在 $(document).ready(function() ... );

即使按钮已初始化，这也不起作用。 jsfiddle.net/4Bgx7/1405

-1。我不赞成投票，因为这是作为一个适当的解决方案被推送的，但基于 jQuery Mobile 文档本身，这不适用于链接按钮。引用docs：“基于链接的按钮不是按钮插件的一部分，仅使用底层的 buttonMarkup 插件来生成按钮样式，因此表单按钮方法（启用、禁用、刷新）不是” t 支持。”

我只使用 val 而不是文本： $('#consumed').val('Mark New'); $('#consumed').button('refresh');

【参考方案3】：

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

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

例如

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

然后一个简单的

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

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

【讨论】：

这是唯一适用于 jQM 1.4.0 的方法。我没有看到尼克在他的回答中引用的嵌套跨度。

B-E-A-U-T-I-F-U-L。这就像昂贵的钢笔在太空中使用铅笔溶液的笑话。

【参考方案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，请将其隔离为有据可查、可重用的代码块。

【讨论】：

我喜欢这个解决方案，因为如果某天在 jQuery Mobile 中更改了类 .ui-btn-text，则只需更改几行代码，而不是一堆 html 和 javascript。

最佳解决方案，就像一个魅力一样，正如 Libby 指出的那样，黑客通过抽象变得干净。

【参考方案5】：

这对我有用：

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

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

【讨论】：

+1 因为这允许您在单击按钮时更改文本。 $("button").bind("click", function(event, ui) $(this).prev('.ui-btn-inner').children('.ui-btn-text').html('new text'); return false; );

【参考方案6】：

对于像

这样的标记

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

$("#consumed").html("Mark New");
$("span > span", $("#consumed").parent()).html("Mark New");

【参考方案7】：

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

所以你不必更改'a'标签的文本，而是更改内部跨度的文本。

例如

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

【参考方案8】：

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

【参考方案9】：

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

【参考方案10】：

由于某种原因，我第一次想更改按钮文本时没有分类为“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);