javascript - 替换 jQuery 单击事件上的标题文本

Question

我正在尝试根据 jQuery 单击事件替换 h3 标记中的文本。但是，我的代码无法正常工作，如果我在单击事件中放置警报语句，我可以看到我在函数内部使用react，但无法执行 text() 调用。

标题 HTML 标记

<div class="section margin-top-50">
    <h3 id="page_header" class="section-height"><?php echo $this->translate('Text_1'); ?></h3>
</div>

菜单 HTML 标记(我在其中定义点击事件)

<ul id="myTab" class="nav nav-layout-sidebar nav-stacked">
    <li class="active">
        <a href="#mood-graph" data-toggle="tab">
            <?php echo $this->translate('Text_1') ?>
        </a>
    </li>
    <li>
        <a href="#quick-mood-stats" data-toggle="tab">
            <?php echo $this->translate('Text_2') ?>
        </a>
    </li>
    <li>
        <a href="#mood-rating" data-toggle="tab">
            <?php echo $this->translate('Text_3') ?>
        </a>
    </li>
</ul>

JS

$(document).ready(function() {
    $("ul#myTab li:nth-child(1)").click(function() {
        alert('clicked 1');
        $("#page_header h3").text("<?php echo $this->translate('Text_1'); ?>");
    });
    $("ul#myTab li:nth-child(2)").click(function() {
        alert('clicked 2');
        $("#page_header h3").text("<?php echo $this->translate('Text_2'); ?>");
    });
    $("ul#myTab li:nth-child(3)").click(function() {
        alert('clicked 3');
        $("#page_header h3").text("<?php echo $this->translate('Text_3'); ?>");
    });
});

Answer 1

更改此 -

$("#page_header h3")

到此-

$("#page_header")

您的第一个选择器正在查找属于 page_header 子级的 h3。它们实际上是一模一样的，您只需使用 ID 即可进行更改。