ejemplos - jquery mobile tutorial

Jquery Mobile: ¿cambia dinámicamente el texto del encabezado de un div plegable?

Question

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

¿Cómo puedo cambiar dinámicamente el texto del encabezado <h3> (''Lugar:'') en el div plegable?

Lo intenté:

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

Y cambia el texto, ¡pero pierde todo el diseño!

Answer 1

La estructura HTML real de un collapsible en jQuery Mobile 1.0RC2 es la siguiente (una vez que el framework ha pasado su aprobación al 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>

El elemento <span> anidado dentro del elemento <span class="ui-btn-text"> hace que esto sea un poco complicado. Si desea conservar la estructura del elemento <span class="ui-btn-text"> , deberá guardar el elemento anidado <span> , sobrescribirlo y luego reemplazarlo:

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

Aquí hay un jsfiddle de la solución anterior: http://jsfiddle.net/jasper/4DAfn/2/

Answer 2

Una opción fácil es darle al h3 una id / clase personalizada, por ejemplo:

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

De esa manera solo necesitarás hacer:

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

Answer 3

Una solución simple sería

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

Mira el violín en http://jsfiddle.net/AQZQs/1/

Answer 4

En 1.3.2, lo siguiente parece funcionar:

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

Feliz Codificación!