更改按钮文本jquery mobile

我正在使用新的jquery mobile 1.0 alpha 1版本来构建移动应用程序，我需要能够切换按钮的文本。切换文本正常工作，但只要您执行文本替换，CSS格式化就会中断。更改按钮文本jquery mobile

屏幕截图搞砸格式：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");

来源

2010-10-24 Josh Rickard

为什么你在使用jQuery的HTML中使用onclick ??? – naugtur 2011-05-30 10:44:38

当你创建它增加了一些额外的元素，看起来像这样的一些内部<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-24 17:48:36

像冠军一样工作，谢谢！ – 2010-10-24 18:01:54

@CaffeineFueled - welcome :) – 2010-10-24 18:02:20

+17

应该有一个更好的方法来实现这一点，比如用'$（'ul'）。listview（'refresh'）;'调用来更新列表。尽管描述的方式有效，但它考虑了内部元素最终布局的内部知识。此实现细节可能在未来发生变化。但由于jquery mobile仍处于alpha阶段，所以实用解决方案需要+1。 – 2011-01-24 19:34:33

对于标记像

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

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

来源

2011-05-30 09:58:58 Vikas

我希望我可以投你一个以上:) – Iducool 2012-07-26 05:24:05

我写了一个简单的插件来为任何一个基于链接按钮，或<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);

...因为你的代码依赖于exac tly如何jQuery Mobile渲染这些按钮不是一个好主意。编程规则：如果你需要使用黑客，请将其隔离到一个记录良好，可重复使用的代码块。

来源

2011-09-02 06:18:32 Leopd

我喜欢这个解决方案，因为如果class.ui-btn-text在jQuery Mobile中有一天会改变，那么只有几行代码可以改变，而不是一堆聚合的html和javascript。 – Libby 2012-04-30 18:49:02

最好的解决方案，工作就像一个魅力，也正如Libby指出，黑客通过抽象变得干净。 – 2012-07-12 16:57:14

这个工作对我来说：

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

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

来源

2011-10-21 23:00:34

+1，因为这允许您在单击按钮时更改文本。 $（“button”）。bind（“click”，function（event，ui）{0} {'。ui-btn-text “）的.html（”新文本“）; \t \t返回FALSE; \t}）;' – styfle 2011-12-21 19:02:08

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

您希望：

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

的原因是为了使您的更改是backwards-与未来版本的jQuery手机兼容。

来源

2012-04-20 15:35:43

这种方法失败，‘未捕获的异常：不能调用按钮的方法来初始化之前，试图调用方法‘刷新’’时，我试试这个（Firefox 12.0）。接受的答案为我工作。使用jQM 1.1.0和jQ 1.7.1。 – PahJoker 2012-05-13 01:01:59

接受的答案虽然有效，但仍然有些枯燥，您希望尽可能使用jQuery API来确保未来的兼容性。这个答案在按钮初始化后工作正常，请确保将代码包装在'$（document）.ready（function（）{...}）;' – 2012-05-13 09:52:59

即使按钮被初始化，这也不起作用。 http://jsfiddle.net/4Bgx7/1405/ – Alejo 2012-07-31 17:20:41

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

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

例如

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

那么简单

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

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

来源

2012-07-19 13:48:28 AL2

这是在jQM 1.4.0中工作的唯一方法。我没有看到Nick在他的回答中提到的嵌套跨度。 – DOK 2014-02-24 01:06:09

B-E-A-U-T-I-F-U-L。这就像那个在铅笔解决方案中在空间工作的昂贵钢笔的笑话。 – 2016-01-28 17:51:16

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

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

例如

$（“＃消费.ui-btn-text”）.text（“test”）;

来源

2012-08-28 21:16:44

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

来源

2013-01-10 15:29:32

从JQM 1.3.1开始（可能更早？）simple .text（）似乎被支持。

来源

2013-04-11 16:08:51 Peter

由于某种原因，我没有'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-02 21:11:24 Plamen

更改按钮文本jquery mobile

回答

相关问题