Jquery mobile:改变列表视图的标题
Jquery mobile: Change the header of a listview
我到处寻找答案,我认为这是一个有点简单的问题。我所看到的所有答案都说使用'.text()',这不起作用。
在Jquery mobile中,我想简单地将listview中的标题文本替换为我在该listview中选择的单选按钮的文本。为了简单起见,只需动态更改列表视图中标题的文本就足够了。问题是,如果不删除一些HTML,我就无法动态更改列表视图标题的文本。我尝试了来自stackoverflow和其他网站的许多建议,包括:
Jquery Mobile:动态改变一个可折叠的div标题的文本?
https://forum.jquery.com/topic/how-can-i-dynamically-change-the-text-of-a-collapsiblejQuery mobile:动态更新可折叠标题导致样式丢失
我正在android设备上使用以下代码进行测试:
- Cordova版本:6.3.1 JQuery 1.11.0 JQuery mobile 1.4.5
<div data-role="page" id="test">
<div role="main" class="ui-content">
<div class="ui-grid-a multiple-inputs">
<div class="ui-block-a">
<ul data-role="listview" data-inset="true" data-shadow="false">
<li data-role="collapsible" data-iconpos="right" data-inset="false">
<h2 id="h2-test-area">Area</h2>
<form>
<fieldset data-role="controlgroup">
<input type="radio" name="rad-test-area" id="rad-test-area-0-1" value="0">
<label for="rad-test-area-0-1">Abdomen</label>
<input type="radio" name="rad-test-area" id="rad-test-area-1-1" value="1">
<label for="rad-test-area-1-1">Arms</label>
<input type="radio" name="rad-test-area" id="rad-test-area-2-1" value="2">
<label for="rad-test-area-2-1">Outer thigh</label>
<input type="radio" name="rad-test-area" id="rad-test-area-3-1" value="3">
<label for="rad-test-area-3-1">Inner thigh</label>
<input type="radio" name="rad-test-area" id="rad-test-area-4-1" value="4">
<label for="rad-test-area-4-1">Calves</label>
<input type="radio" name="rad-test-area" id="rad-test-area-5-1" value="5">
<label for="rad-test-area-5-1">Flanks</label>
<input type="radio" name="rad-test-area" id="rad-test-area-6-1" value="6">
<label for="rad-test-area-6-1">Chest</label>
<input type="radio" name="rad-test-area" id="rad-test-area-7-1" value="7">
<label for="rad-test-area-7-1">Buttocks</label>
<input type="radio" name="rad-test-area" id="rad-test-area-8-1" value="8">
<label for="rad-test-area-8-1">Back (lower and upper)</label>
<input type="radio" name="rad-test-area" id="rad-test-area-9-1" value="9">
<label for="rad-test-area-9-1">Jaw line</label>
<input type="radio" name="rad-test-area" id="rad-test-area-10-1" value="10">
<label for="rad-test-area-10-1">Chin</label>
<input type="radio" name="rad-test-area" id="rad-test-area-11-1" value="11">
<label for="rad-test-area-11-1">Knee</label>
</fieldset>
</form>
</li>
</ul>
</div>
<div class="ui-block-b">
<ul data-role="listview" data-inset="true" data-shadow="false">
<li data-role="collapsible" data-iconpos="right" data-inset="false">
<h2>Relevant treatments:</h2>
<form>
<fieldset data-role="controlgroup">
<input type="checkbox" name="cb-test-1" id="cb-test-1-1">
<label for="cb-test-1-1">Fillers</label>
<input type="checkbox" name="cb-test-1" id="cb-test-1-2">
<label for="cb-test-1-2">Botox</label>
<input type="checkbox" name="cb-test-1" id="cb-test-1-3">
<label for="cb-test-1-3">Dermaroller</label>
<input type="checkbox" name="cb-test-1" id="cb-test-1-4">
<label for="cb-test-1-4">HydraFacial</label>
<input type="checkbox" name="cb-test-1" id="cb-test-1-5">
<label for="cb-test-1-5">FSR</label>
<input type="checkbox" name="cb-test-1" id="cb-test-1-6">
<label for="cb-test-1-6">Laser</label>
<input type="checkbox" name="cb-test-1" id="cb-test-1-7">
<label for="cb-test-1-7">Ping</label>
<input type="checkbox" name="cb-test-1" id="cb-test-1-8">
<label for="cb-test-1-8">Endymed</label>
<input type="checkbox" name="cb-test-1" id="cb-test-1-9">
<label for="cb-test-1-9">Chemical Peel</label>
<input type="checkbox" name="cb-test-1" id="cb-test-1-10">
<label for="cb-test-1-10">Aqualyx</label>
<input type="checkbox" name="cb-test-1" id="cb-test-1-11">
<label for="cb-test-1-11">Hyalase</label>
<input type="checkbox" name="cb-test-1" id="cb-test-1-12">
<label for="cb-test-1-12">Tretinion and Hydroquinone (Obagi)</label>
</fieldset>
</form>
</li>
</ul>
</div>
</div><!-- /grid-a -->
</div><!-- /content -->
</div><!-- /test page -->
这是什么HTML我试图操纵看起来像渲染前:
<h2 id="h2-test-area">Area</h2>
文本"Area"是我想要改变的。
这是什么HTML我试图操纵看起来像渲染后:
<h2 id="h2-test-area" class="ui-collapsible-heading">
<a href="#" class="ui-collapsible-heading-toggle ui-btn ui-btn-icon-right ui-btn-inherit ui-icon-minus">
Area
<span class="ui-collapsible-heading-status"> click to collapse contents</span>
::after
</a>
</h2>
Javascript: $("input[name='rad-test-area']").on("change", function() {
$("#h2-test-area a.ui-collapsible-heading-toggle").text("new text");
});
当我执行上面的javascript时,它取代了我想要的文本,但它也取代了HTML中文本"Area"之后出现的span。为什么每个人都说'.text()'工作时,它清楚地删除HTML?提前感谢您的帮助
您可以通过在要更改的文本周围使用SPAN元素来使您的工作更轻松:
<h2 id="h2-test-area"><span id="h2-test-area-span">Area</span></h2>
那么你可以很容易地在span上使用。text():
$("input[name='rad-test-area']").on("change", function() {
$("#h2-test-area-span").text("new text");
});
尝试使用html代替文本来保留html内容。
$("input[name='rad-test-area']").on("change", function() {
$("#h2-test-area a.ui-collapsible-heading-toggle").html().replace("Area", "new text");
});
相关文章:
- CSS-如何定位内容数据标题
- 如何使用javascript从主svg对象动态创建svg视图框
- 正在使用$location.path(.)路由ng视图
- 带有粘性标题的角度ng视图不起作用
- 网格视图:防止行移动到标题行上方
- 页面加载后,将FooTable断点应用于网格视图中的列标题
- 完整日历(议程周视图):标题与一个月重叠的周的格式
- 从周视图中获取日期 单击标题
- 滚动时修复网格视图标题的位置
- 如何设置我的标题的动画,以便在加载时从左水平滑动到页面视图
- Backbone.Marionette:将标题添加到集合视图
- 如何在不点击标题的情况下从客户端对网格视图进行排序
- Geogebra Javascript - 如何为在图形视图中创建的每个数学对象默认没有标题
- 避免Android上的视图标题闪烁
- 如何改变标题/视图的颜色
- 从钛合金表视图中获取行标题
- Jquery mobile:改变列表视图的标题
- 离子离子视图中缺少标题
- 离子视图标题中的图像
- FullCalendar月视图上的标题没有正确显示