更改标题文本

Changing heading text

本文关键字：文本 标题      更新时间：2024-06-15

我试图使用jQuery更改其中一个标题中的文本，但它只是将标题留空。我该如何让它发挥作用？

编辑：

html页面，标题：

<!-- Logs -->
    <div data-role="page" data-theme="a" id="page15">
        <div data-theme="a" data-role="header">
            <h3>
                Logs
            </h3>
            <a data-role="button" data-direction="reverse" data-transition="slide" href="#page3" data-icon="arrow-l" data-iconpos="left" class="ui-btn-left">
                Back
            </a>
        </div>
        <div data-role="content" style="padding: 15px">
            <a data-role="button" data-transition="slide" href="#page1">
                Add log entry
            </a>
            <div data-role="collapsible-set" data-theme="" data-content-theme="">
                <div data-role="collapsible" data-collapsed="true">
                    <h3>
                        July 2012
                    </h3>
                    <div data-role="collapsible-set" data-theme="" data-content-theme="">
                        <div data-role="collapsible" data-collapsed="true" onclick="getLogTime(); this.onclick=null">
                            <h3>
                                July 5
                            </h3>
                            <div data-role="collapsible-set" data-theme="" data-content-theme="">
                                <div data-role="collapsible" data-collapsed="true" onclick="getLogData(); this.onclick=null">
                                    //Heading I'm trying to change
                                    <h3 id=time1>
                                    </h3>
                                    <div>
                                        <p id="logFortime1">
                                        </p>
                                    </div>
                                </div>
                                <div data-role="collapsible" data-collapsed="true">
                                    <h3>
                                        12:47 pm
                                    </h3>
                                </div>
                            </div>
                        </div>
                        <div data-role="collapsible" data-collapsed="true">
                            <h3>
                                July 6
                            </h3>
                        </div>
                    </div>
                </div>
                <div data-role="collapsible" data-collapsed="true">
                    <h3>
                        August 2012
                    </h3>
                </div>
            </div>
            <a data-role="button" data-transition="slide" href="#page21">
                Graphs
            </a>
        </div>
    </div>

应该改变航向的功能：

function getLogTime() {
$('#time1').text('Time')
}

编辑：

添加了一个=，因此标题中的文本现在发生了更改，但它失去了所有样式和可折叠菜单中的内容。

您应该使用标记名或ID（首选）。不要组合多个选择器（尤其是因为在任何时候DOM中都不应该有多个ID）。html（）方法比text（）方法快得多（请参阅http://jsperf.com/jq2-text-vs-html)，但是，从语义上讲，text（）更合适在执行任何代码（针对DOM）之前，请确保已加载DOM以下是最快的，应该有效。

$(function(){
  $("#time1").html("Time");
});

为什么不使用纯jQuery解决方案？您可以通过这种方式简单地使用jQuery，而不是在可点击的元素上提供onclick attirbutes。

HTML:

<h3 id="time1">Deepak</h3>
<a id='changeheading'>click</a>

JavaScript/jQuery:

$(document).ready(function(){
$('#changeheading').on("click",function(){    
$('#time1').text('Time');
});
});​

而且效果很好。点击此处查看演示http://jsfiddle.net/DeepakKamat/b9ggb/25/

相关文章：