替换jQuery单击事件上的标题文本 - replacing header text on jQuery click event

replacing header text on jQuery click event

我正在尝试基于jQuery点击事件替换h3标记中的文本。然而，我的代码不起作用，如果我在click事件中放入一条alert语句，我可以看到我在函数中做出了反应，但无法执行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'); ?>");
    });
});

更改此-

$("#page_header h3")

到这个-

$("#page_header")

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

您不能从JavaScript调用PHP。为了完成这样的事情，你需要AJAX，但我认为这对我认为你正在尝试做的事情没有必要

为每个锚点添加一个类"toggleHeader"。然后：

$(document).ready(function() {
    $('a.toggleHeader').on('click', function() {
        $('#page_header').html( $(this).html() );
    });
});

当您只需抓取单击的锚点的内容时，无需按每个锚点将其分解