Jquery Mobile: динамически изменять текст заголовка разборного div? - PullRequest
Новая
       6

Jquery Mobile: динамически изменять текст заголовка разборного div?

8 голосов
/ 22 октября 2011 
<div data-role="collapsible" data-content-theme="e" id="collapsePlace">
    <h3>Place:</h3>
    <!--things...-->
</div>

Как я могу динамически изменить текст заголовка <h3> ('Place:') в разборном элементе div?

Я пытался: 

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

И это меняет текст - но теряет все стили!

Ответы [ 4 ]

5 голосов
/ 18 декабря 2013

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

Счастливого кодирования!

5 голосов
/ 23 октября 2011

Фактическая HTML-структура сворачиваемого в jQuery Mobile 1.0RC2 выглядит следующим образом (после того, как фреймворк передал 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> в <span class="ui-btn-text"> элемент делает это немного сложнее.Если вы хотите сохранить структуру элемента <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/

2 голосов
/ 18 февраля 2013

Простое решение будет 

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

Проверьте скрипку на http://jsfiddle.net/AQZQs/1/

0 голосов
/ 11 декабря 2012

Простой вариант - присвоить h3 собственный идентификатор / класс, например: 

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

Таким образом, вам нужно будет только: 

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