更改按鈕文本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

回答

相關問題