![的标题文本]( "的标题文本")
本文介绍了Jquery Mobile:动态更改可折叠 div 的标题文本?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
限时删除！！
<h3>地点:</h3><!--事情...-->
如何动态更改可折叠 div 中 <h3> 标题 ('Place:') 的文本?
我试过了:
$('#collapsePlace').children('h3').text('new text');
它改变了文本 - 但失去了所有的样式！
解决方案
jQuery Mobile 1.0RC2 中可折叠组件的实际 HTML 结构如下(在框架通过 HTML 之后):
<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">地方:<span class="ui-collapsible-heading-status">点击展开内容</span><span class="ui-icon ui-icon-plus ui-icon-shadow"></span></span></a><div class="ui-collapsible-content ui-body-e ui-collapsible-content-collapsed" aria-hidden="true"><!--事情...-->
<span class="ui-btn-text"> 元素中的嵌套 <span class="ui-btn-text"> 元素的结构，您需要保存嵌套的 <span> 元素，覆盖它，然后替换它:
//在 document.ready 上运行代码$(函数(){变量数 = 1;//添加单击处理程序链接以在每次单击时增加可折叠的标题$('a').bind('click', function () {//缓存`<span class="ui-btn-text">`元素及其子元素var $btn_text = $('#collapsePlace').find('.ui-btn-text'),$btn_child = $btn_text.find('.ui-collapsible-heading-status');//覆盖标题文本，然后附加其子项以恢复先前的结构$btn_text.text('New String (' + num++ + ')').append($btn_child);});});
这是上述解决方案的jsfiddle:http://jsfiddle.net/jasper/4DAfn/2/
<div data-role="collapsible" data-content-theme="e" id="collapsePlace">
<h3>Place:</h3>
<!--things...-->
</div>
How can I dynamically change the text of the <h3> header ('Place:') in the collapsible div?
I tried:
$('#collapsePlace').children('h3').text('new text');
And it changes the text - but loses all of the styling!
解决方案
The actual HTML structure of a collapsible in jQuery Mobile 1.0RC2 is the following (after the framework has made its pass on the 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>
The nested <span> element within the <span class="ui-btn-text"> element makes this a little tricky. If you want to preserve the structure of the <span class="ui-btn-text"> element you will need to save the nested <span> element, overwrite it, and then replace it:
//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);
});
});
Here is a jsfiddle of the above solution: http://jsfiddle.net/jasper/4DAfn/2/
这篇关于Jquery Mobile:动态更改可折叠 div 的标题文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
1403页，肝出来的..