关键词：

【中文标题】Jquery mobile：更改列表视图的标题【英文标题】：Jquery mobile: Change the header of a listview 【发布时间】：2016-12-23 00:25:28 【问题描述】：

对于我认为有点简单的问题，我已经四处寻找答案。我看到的所有答案都是说使用不起作用的'.text（）'。

在 Jquery mobile 中，我想简单地将列表视图中的标题文本替换为我在该列表视图中选择的单选按钮的文本。为简单起见，只需动态更改列表视图中标题的文本就足够了。问题是我不能在不删除一些 HTML 的情况下动态更改列表视图标题的文本。我尝试了来自 *** 和其他网站的许多建议，包括：

Jquery Mobile: Dynamically change the text of the header of a collapsible div?

https://forum.jquery.com/topic/how-can-i-dynamically-change-the-text-of-a-collapsible

jQuery mobile: Dynamically updating collapsible heading causes loss of styling

我正在使用以下设备在 android 设备上进行测试：

科尔多瓦版本：6.3.1 jQuery 1.11.0 JQuery 移动版 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 在渲染之前的样子：

<h2 id="h2-test-area">Area</h2>

文本“区域”是我想要更改的。

这是我试图操作的 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 中文本“区域”之后出现的跨度。为什么每个人都说 '.text()' 在明确删除 HTML 时有效？提前感谢您的帮助。

【问题讨论】：

【参考方案1】：

您可以用 SPAN 元素包围要更改的文本，让您的生活更轻松：

<h2 id="h2-test-area"><span id="h2-test-area-span">Area</span></h2>

然后您可以轻松地在该跨度上使用 .text()：

$("input[name='rad-test-area']").on("change", function() 
    $("#h2-test-area-span").text("new text");
);

DEMO

【讨论】：

谢谢，这比我想象的要容易。我想我只是认为 jquery mobile 应该有一种更简单的方法来操作列表视图标题。【参考方案2】：

尝试使用 html 替换而不是文本来保留 html 内容。

$("input[name='rad-test-area']").on("change", function() 
    $("#h2-test-area a.ui-collapsible-heading-toggle").html().replace("Area", "new text");
);

【讨论】：

你差点让我到达那里，我必须执行以下操作：$("input[name='rad-test-area']").on("change", function() var areaTxtElem = $("#h2-test-area a.ui-collapsible-heading-toggle").html().replace("Area", "new text"); $("#h2-test-area a.ui-collapsible-heading-toggle").html(areaTxtElem); ) 但是使用此代码，如果我再次更改收音机的值，我将不得不使用更多代码来知道要替换什么.感谢您的努力。

动态更改 jQuery Mobile 列表视图中的图标

】动态更改jQueryMobile列表视图中的图标【英文标题】：DynamicallychangeiconinjQueryMobilelistview【发布时间】：2013-02-1310:40:25【问题描述】：当我动态更改图标时，它不会反映页面上的更改，即使在标记中它已更改。例子：<uldata-role="... 查看详情

在 jQuery-Mobile 1.4.5 中更改列表视图颜色

】在jQuery-Mobile1.4.5中更改列表视图颜色【英文标题】：changelistviewcolorinjQuery-Mobile1.4.5【发布时间】：2018-04-0117:36:52【问题描述】：在我的jQuery-MobileListview中更改一个特定listitem的background-color时遇到一些问题。每个listitem都有自己... 查看详情

jQuery Mobile：在列表视图数据拆分图标上更改/切换主题

】jQueryMobile：在列表视图数据拆分图标上更改/切换主题【英文标题】：jQueryMobile:change/switchthemeonlistviewdata-split-icon【发布时间】：2013-08-3109:13:42【问题描述】：我在jQueryMobile(jQm)中拆分了列表视图（带有可折叠集）。可以看hereonJ... 查看详情

jQuery Mobile 动态列表视图

】jQueryMobile动态列表视图【英文标题】：jQueryMobiledynamiclistview【发布时间】：2016-09-3003:14:41【问题描述】：我创建了一个jquerymobilephonegap移动应用程序，用于显示来自rss提要的技术新闻。在网络导航器上它可以正常工作，但是当... 查看详情

面板内的 JQuery Mobile 列表视图

】面板内的JQueryMobile列表视图【英文标题】：JQueryMobilelistviewinsideapanel【发布时间】：2015-09-0216:20:03【问题描述】：我正在尝试在面板中使用带有可折叠项目的列表视图，但我得到了奇怪的结果。具体来说，这是我正在使用的最... 查看详情

JQuery Mobile：拉动以刷新列表视图[重复]

】JQueryMobile：拉动以刷新列表视图[重复]【英文标题】：JQueryMobile:Pulltorefreshlistview[duplicate]【发布时间】：2012-02-1723:47:35【问题描述】：可能重复：Howtodothispull-to-refreshinwebapp?是否有可用的插件为列表视图的列表项设置动画，以... 查看详情

更改 jquery mobile listview 背景颜色

】更改jquerymobilelistview背景颜色【英文标题】：changejquerymobilelistviewbackgroundcolor【发布时间】：2016-01-1112:24:45【问题描述】：我是编码方面的初学者，我需要一些帮助。我正在使用DreamweaverCS6和JqueryMobile模板设计应用程序。我想要... 查看详情

如何防止jquery mobile中的默认列表视图点击？

】如何防止jquerymobile中的默认列表视图点击？【英文标题】：Howtopreventdefaultlistviewclickinjquerymobile?【发布时间】：2013-01-2504:36:59【问题描述】：我创建一个列表视图..在列表视图中我放了一个按钮..喜欢<ulclass="ui-listview"><li&... 查看详情

动态填充 jQuery Mobile 列表视图内容

】动态填充jQueryMobile列表视图内容【英文标题】：DynamicallypopulatejQueryMobilelistviewcontent【发布时间】：2012-01-0106:56:42【问题描述】：我目前在jQuerymobile中使用动态生成的列表视图来显示来自数据库的一堆数据。虽然大部分内容都... 查看详情

jquery mobile自定义列表视图格式

】jquerymobile自定义列表视图格式【英文标题】：jquerymobilecustomlistviewformatting【发布时间】：2011-12-3123:18:28【问题描述】：所以我正在开发一个使用jquery移动框架的网络应用程序，我希望有一种方法可以进一步自定义列表视图元素... 查看详情

Jquery Mobile 1.2.0 Alpha 1 弹出和动态列表视图

】JqueryMobile1.2.0Alpha1弹出和动态列表视图【英文标题】：JqueryMobile1.2.0Alpha1popupanddynamiclistview【发布时间】：2012-08-2614:40:38【问题描述】：我在让我的移动应用程序为1.2更改和升级做好准备时遇到了问题。在使用新的弹出窗口时，... 查看详情

jQuery Mobile 列表视图：初始化错误

】jQueryMobile列表视图：初始化错误【英文标题】：jQueryMobileListView:initializeerror【发布时间】：2012-03-2701:59:52【问题描述】：我认为这有一个简单的解决方案。我有一个列表，我想把它做成一个列表视图。东西是动态添加的。HTML... 查看详情

如何在 Jquery Mobile 的可点击列表项中创建带有按钮的列表视图

】如何在JqueryMobile的可点击列表项中创建带有按钮的列表视图【英文标题】：HowtocreatelistviewwithbuttonsinsideclickablelistitemsinJqueryMobile【发布时间】：2014-06-1110:22:22【问题描述】：有什么方法可以在JqueryMobile中创建一个列表视图，该... 查看详情

jQuery mobile折叠列表视图，搜索不起作用

】jQuerymobile折叠列表视图，搜索不起作用【英文标题】：jQuerymobilecollapsedlistviewwithsearchnotworking【发布时间】：2013-06-2215:59:57【问题描述】：我在jquery中创建了一个带有过滤器的listdivider的列表视图。过滤器按预期工作，但只要您... 查看详情

JQuery Mobile swiperight 事件触发先前触发的列表视图元素

】JQueryMobileswiperight事件触发先前触发的列表视图元素【英文标题】：JQueryMobileswiperighteventfirespreviouslyfiredlistviewelements【发布时间】：2015-06-2307:56:18【问题描述】：我正在尝试使用\'swiperight\'事件来删除列表视图项，但似乎该事件... 查看详情

在 div 中导航 jQuery Mobile 嵌套列表视图

】在div中导航jQueryMobile嵌套列表视图【英文标题】：NavigatejQueryMobilenestedlistviewwithinadiv【发布时间】：2015-02-0204:14:57【问题描述】：我正在尝试将页面上的嵌套列表放入div元素中，它工作正常，直到我单击一些具有后代元素的项... 查看详情

具有多个过滤器的 JQuery Mobile 可过滤列表视图

】具有多个过滤器的JQueryMobile可过滤列表视图【英文标题】：JQueryMobilefilterablelistviewwithmultiplefilters【发布时间】：2016-05-2612:28:50【问题描述】：我有一个JQM1.4.2可过滤列表视图，其中包含不同语言的条目。我只想在项目代码中搜... 查看详情

将第 n 项焦点放在 Jquery Mobile 列表视图上

】将第n项焦点放在JqueryMobile列表视图上【英文标题】：focusnthitemonJqueryMobilelistview【发布时间】：2012-03-2522:57:59【问题描述】：我在一个jQueryMobilelistivew中有大约100个项目。是否可以关注动态生成的列表视图中的第N个元素？？我... 查看详情