Jquery Mobile：动态更改可折叠 div 的标题文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7857218/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery Mobile: Dynamically change the text of the header of a collapsible div?
提问by Yuval A.
<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?
如何动态更改<h3>可折叠 div 中标题（'Place:'）的文本？
I tried:
我试过：
$('#collapsePlace').children('h3').text('new text');
And it changes the text - but loses all of the styling!
它改变了文本 - 但失去了所有的样式！
采纳答案by Jasper
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):
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>
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:
<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);
});
});
Here is a jsfiddle of the above solution: http://jsfiddle.net/jasper/4DAfn/2/
这是上述解决方案的 jsfiddle：http: //jsfiddle.net/jasper/4DAfn/2/
回答by Roman
In 1.3.2, the following seem to work:
在 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");
Happy Coding!
快乐编码！
回答by Jay Mayu
A simple solution would be
一个简单的解决方案是
$('#collapsePlace .ui-btn-text').text("hello ");
Check out the fiddle at http://jsfiddle.net/AQZQs/1/
回答by Alex
An easy option is to give the h3 a custom id/class, for example:
一个简单的选择是给 h3 一个自定义的 id/class，例如：
<div data-role="collapsible" data-content-theme="e" id="collapsePlace">
<h3 id='h3Text'>Place:</h3>
<!--things...-->
</div>
That way you only will need to do:
这样你只需要做：
$('#collapsePlace #h3Text').text('new text');
