Jquery Mobile：動態更改可摺疊div的標題文本？

<div data-role="collapsible" data-content-theme="e" id="collapsePlace"> 
    <h3>Place:</h3> 
    <!--things...--> 
</div>

如何在collapsible div中動態更改<h3>標題（'Place：'）的文本？Jquery Mobile：動態更改可摺疊div的標題文本？

我想：

$('#collapsePlace').children('h3').text('new text');

而且它改變了文本 - 但失去所有的造型！

來源

2011-10-22 Yuval A.

我問了一個類似的問題，我認爲我提供的答案是更好的： http://stackoverflow.com/questions/38978102/jquery-mobile-change-the-header-of-a-listview/38980002 ＃38980002 – ModusPwnens

在jQuery Mobile的1.0RC2一個可摺疊的實際HTML結構如下（框架取得了其通後的HTML）：

<div id="collapsePlace" data-content-theme="e" data-role="collapsible" class="ui-collapsible ui-collapsible-collapsed"> 
    <h3 class="ui-collapsible-heading ui-collapsible-heading-collapsed"> 
     <a class="ui-collapsible-heading-toggle ui-btn ui-btn-icon-left ui-corner-top ui-corner-bottom ui-btn-up-c" href="#" data-theme="c"> 
      <span aria-hidden="true" class="ui-btn-inner ui-corner-top ui-corner-bottom"> 
       <span class="ui-btn-text">Place: 
        <span class="ui-collapsible-heading-status"> click to expand contents</span> 
       </span> 
       <span class="ui-icon ui-icon-plus ui-icon-shadow"></span> 
      </span> 
     </a> 
    </h3> 
    <div class="ui-collapsible-content ui-body-e ui-collapsible-content-collapsed" aria-hidden="true"> 
     <!--things...--> 
    </div> 
</div>

的<span class="ui-btn-text">元素內的嵌套<span>元件使這有點棘手。如果您想保留<span class="ui-btn-text">元素的結構，你將需要保存嵌套<span>元素，將其覆蓋，然後替換：

//run code on document.ready 
$(function() { 
    var num = 1; 
    //add click handler to link to increment the collapsible's header each click 
    $('a').bind('click', function() { 
     //cache the `<span class="ui-btn-text">` element and its child 
     var $btn_text = $('#collapsePlace').find('.ui-btn-text'), 
      $btn_child = $btn_text.find('.ui-collapsible-heading-status'); 
     //overwrite the header text, then append its child to restore the previous structure 
     $btn_text.text('New String (' + num++ + ')').append($btn_child); 
    }); 
});

下面是上述解決方案的的jsfiddle：http://jsfiddle.net/jasper/4DAfn/2/

來源

2011-10-23 00:01:41 Jasper

完美的作品，非常感謝！ – Matthieu

一個容易的選擇是給H3自定義的ID /類，例如：

<div data-role="collapsible" data-content-theme="e" id="collapsePlace"> 
    <h3 id='h3Text'>Place:</h3> 
    <!--things...--> 
</div>

這樣，你只需要做到：

$('#collapsePlace #h3Text').text('new text');

來源

2012-12-10 20:15:54 Alex

我不知道它是否適用於以前版本的JQM，但它不適用於1.2.0 –

，正如您可以在此小提琴中看到的那樣，雖然文字發生更改，但樣式會被刪除。 http://jsfiddle.net/AQZQs/ –

1.2爲我工作 – akiva

簡單的解決辦法是

$('#collapsePlace .ui-btn-text').text("hello ");

在http://jsfiddle.net/AQZQs/1/

來源

2013-02-18 06:00:41

這將從問題HTML中顯示的'.ui-btn-text'元素中移除HTML。 – Jasper

用於以後的jQuery移動版本（用v 1.4.3測試），用「.ui-collapsible-heading-toggle」替換「.ui-btn-text」 –

在1.3.2，下面的檢查了小提琴似乎工作：

<div id="MyID" data-role="collapsible" >  
    <h3><span id="MyHeaderID">My Header</span></h3>  
    <!-- My Content --> 
</div>

JQuery的：

$("#MyID h3 #MyHeaderID").text("Your New Header");

快樂編碼！

來源

2013-12-17 20:28:38 Roman

正在尋找這個。大！ – user3023313

Jquery Mobile：動態更改可摺疊div的標題文本？

回答

相關問題