Question

我正在尝试基于jQuery click事件替换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'); ?>");
    });
});

Answer 1

改变这个 -

$("#page_header h3")

到此 -

$("#page_header")

你的第一个选择器正在寻找属于page_header子节点的h3。它们实际上是同一个，您只需要使用ID进行更改。

Answer 2

您无法从JavaScript调用PHP。为了完成这样的事情，你需要AJAX，但我认为这不是我认为你想做的事情。

为每个锚添加一个“toggleHeader”类。然后：

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

当你可以抓住你点击的锚的内容时，不需要通过每个锚来分解

替换jQuery click事件上的头文本

2 个答案: