Jquery Mobile: Tự động thay đổi văn bản của tiêu đề của div có thể thu gọn?

Question

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

Làm cách nào để tự động thay đổi văn bản của tiêu đề <h3> ('Địa điểm:') trong div có thể thu gọn?

tôi đã cố gắng:

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

Và nó thay đổi văn bản - nhưng mất tất cả các phong cách!

Answer 1

Cấu trúc HTML thực tế của một collapsible trong jQuery Mobile 1.0RC2 như sau (sau khi khuôn khổ đã vượt qua nó trên 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> 

Các <span> yếu tố lồng bên trong phần tử <span class="ui-btn-text"> làm này một chút khéo léo. Nếu bạn muốn giữ cấu trúc của phần tử <span class="ui-btn-text"> bạn sẽ cần phải lưu <span> yếu tố lồng nhau, ghi đè lên nó, và sau đó thay thế nó:

//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); 
    }); 
}); 

Đây là một jsfiddle của giải pháp trên: http://jsfiddle.net/jasper/4DAfn/2/

Answer 2

một lựa chọn dễ dàng là để cung cấp cho các h3 một id tùy chỉnh/lớp, ví dụ:

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

Bằng cách đó bạn sẽ chỉ cần làm:

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

Answer 3

Một giải pháp đơn giản sẽ là

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

Check-out fiddle tại http://jsfiddle.net/AQZQs/1/

Answer 4

Trong 1.3.2, sau đây dường như làm việc:

<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"); 

Happy Coding!