jQuery mobile:更改列表视图的标题 [英] Jquery mobile: Change the header of a listview
问题描述
我到处都在寻找答案，我认为那是一个有点简单的问题.我所看到的所有答案都在说使用不起作用的'.text()'.
I have looked all over for the answer to what I thought would be a somewhat simple question. All the answers I have seen are saying to use '.text()' which does not work.
在Jquery mobile中，我只想用在该列表视图中选择的单选按钮的文本替换列表视图中的标题文本.为简单起见，仅在列表视图中动态更改标题的文本就足够了.问题是，如果不删除一些HTML，就无法动态更改listview标题的文本.我尝试了来自stackoverflow和其他站点的许多建议，包括:
In Jquery mobile, I want to simply replace the header text in a listview with the text of a radio button that I select in that listview. For simplicity sake just dynamically changing the text of the header in the listview will suffice. The issue is that I cannot dynamically change the text of the header of the listview without removing some HTML. I have tried numerous suggestions from stackoverflow and other sites including:
Jquery Mobile:动态更改可折叠div标题的文本?
https://forum.jquery.com/topic/如何动态地更改可折叠的文本
> jQuery mobile:动态更新可折叠标题会导致损失样式
我正在使用以下设备在android设备上进行测试:
I am testing on an android device using the following:
- 科尔多瓦版本:6.3.1
- JQuery 1.11.0
- jQuery Mobile 1.4.5
HTML:
<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呈现前的样子:
This is what the HTML I am trying to manipulate looks like before render:
<h2 id="h2-test-area">Area</h2>
我要更改文本区域".
这就是渲染后我试图处理的HTML的样子:
This is what the HTML I am trying to manipulate looks like after render:
<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:
Javascript:
$("input[name='rad-test-area']").on("change", function() {
$("#h2-test-area a.ui-collapsible-heading-toggle").text("new text");
});
当我执行上述javascript时，它替换了我想要的文本，但是它也替换了HTML中文本"Area"之后出现的跨度.为什么每个人都说'.text()'在清除HTML时有效?预先感谢您的帮助.
When I perform the above javascript it replaces the text I want it to but it also replaces the span that occurs after the text "Area" in the HTML. Why is everyone saying that '.text()' works when it clearly removes HTML? Thank you in advance for any help.
推荐答案
通过使用SPAN元素包围要更改的文本，可以使您的生活更轻松:
You can make your life easier by surrounding the text to be changed with a SPAN element:
<h2 id="h2-test-area"><span id="h2-test-area-span">Area</span></h2>
然后，您可以轻松地在该范围内使用.text():
Then you can easily use .text() on that span:
$("input[name='rad-test-area']").on("change", function() {
$("#h2-test-area-span").text("new text");
});
这篇关于jQuery mobile:更改列表视图的标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
