Question

我正在尝试使用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')
}

编辑：

添加了=所以标题中的文本现在更改了，但它丢失了所有样式和可折叠菜单中的内容。

Answer 1

您应该使用标签名称或ID（首选）。不要组合多个选择器（特别是因为在任何时候你都不应该在DOM中有多个ID）。 html（）方法比text（）方法快得多（参见http://jsperf.com/jq2-text-vs-html），但从语义上讲，text（）更合适。 确保在执行任何代码之前已加载DOM（对于DOM）。以下是最快的，应该可以正常工作。

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

Answer 2

为什么不使用纯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/

更改标题文字

2 个答案: