Jquery Mobile: modifier Dynamiquement le texte de l'en-tête d'un réductible div?

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

Comment puis-je modifier dynamiquement le texte de la <h3> header ('Lieu:') dans le réductible div?

J'ai essayé:

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

Et il modifie le texte - mais perd tous le style!

J'ai posé une question similaire, je pense que la réponse m'a été fourni, c'est mieux: stackoverflow.com/questions/38978102/...

OriginalL'auteur Yuval A. | 2011-10-22

Le HTML d'une structure pliable en jQuery Mobile 1.0RC2 est la suivante (d'après le cadre a fait sa passe sur le code 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>

Imbriquée <span> élément à l'intérieur de la <span class="ui-btn-text"> élément le rend un peu difficile. Si vous voulez préserver la structure de la <span class="ui-btn-text"> élément, vous devrez enregistrer le imbriquée <span> élément, l'écraser, puis le remplacer:

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

Ici est un jsfiddle de la solution ci-dessus: http://jsfiddle.net/jasper/4DAfn/2/

fonctionne parfaitement, merci beaucoup !

OriginalL'auteur Jasper

Dans la section 1.3.2, les éléments suivants semblent fonctionner:

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

Bon Codage!

A la recherche de ce. Super!

OriginalL'auteur Roman

2

Une solution simple serait
```
$('#collapsePlace .ui-btn-text').text("hello ");
```
Découvrez le violon à http://jsfiddle.net/AQZQs/1/

Qui permet de supprimer le HTML à partir de la .ui-btn-text élément de la question du HTML.
pour plus tard, jQuery mobile versions (testé avec v 1.4.3), remplacer ".ui-btn-texte" avec ".ui-pliable-cap-toggle"

OriginalL'auteur Jay Mayu
0

Une option facile est de donner à l'un h3 id personnalisé de classe, par exemple:
```
<div data-role="collapsible" data-content-theme="e" id="collapsePlace">
    <h3 id='h3Text'>Place:</h3>
    
</div>
```
De cette façon, vous n'aurez besoin de le faire:
```
$('#collapsePlace #h3Text').text('new text');
```
Je ne sais pas si cela a fonctionné pour la version précédente de JQM, mais il ne fonctionne pas pour 1.2.0
comme vous pouvez le voir dans ce violon, le style se sont retirés si la modification du texte. jsfiddle.net/AQZQs
a fonctionné pour moi avec la 1.2

OriginalL'auteur Alex

Vous devez vous connecter pour publier un commentaire.