Jquery Mobile:动态更改可折叠 div 标题的文本?
<div data-role="collapsible" data-content-theme="e" id="collapsePlace">
<h3>Place:</h3>
<!--things...-->
</div>
如何动态更改可折叠 div 中
标题('Place:')的文本?
我尝试过:
$('#collapsePlace').children('h3').text('new text');
它改变了文本 - 但丢失了所有样式!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

发布评论
评论(4)
奢望 2024-12-18 10:51:02
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>
="">
元素class="ui-btn-text"> 元素使这有点棘手。如果您想保留 元素的结构,则需要保存嵌套的
元素,覆盖它,然后替换它:
//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/
来世叙缘 2024-12-18 10:51:02
~没有更多了~
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
在 1.3.2 中,以下内容似乎有效:
JQuery:
快乐编码!
In 1.3.2, the following seem to work:
JQuery:
Happy Coding!