分类导航

jQuery 发布时间：2022-03-30 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了Jquery Mobile：动态更改可折叠div的标题文本？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

如何动态更改< h3>的文本？标题(‘Place：’)在可折叠的div中？

我试过了：

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

它改变了文本 – 但失去了所有的造型！

解决方法

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

这是上述解决方案的一个方面：http://jsfiddle.net/jasper/4DAfn/2/