Jquery mobile：更改列表视图的标题

Posted 2023-05-07

【中文标题】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); ) 但是使用此代码，如果我再次更改收音机的值，我将不得不使用更多代码来知道要替换什么.感谢您的努力。