javascript - 在 PHP 中单击时使引用切换为粗体

Question

我试图在单击时使引用标记切换为粗体。我知道网上有很多例子，我尝试了其中的大部分，但我一直收到这个错误:

Uncaught TypeError: Cannot read property 'click' of null

我正在用 PHP 编写所有内容(我有我的理由)，代码如下:

print "<script type=\"text/javascript\">\n";
echo <<<JS

$(".boldtrigger").click(function(){
    $(".boldtrigger").toggleClass("bold");
});
JS;

/*Now for Html Part*/
echo "<tr class = 'oddkill' ><td class = 'entry_cell' ><a href = \"javascript: displayRow('context_row_${row_paridy}') \" class = 'boldtrigger' style = 'color:black'>$test</a></td>";

我在另一个文件中有 css:

.bold {
    font-weight: bold;
}

我不明白为什么它认为“boldtrigger”类不存在。有人可以帮忙吗？

Answer 1

首先，你问的不是“PHP”。

PHP 是一种服务器端语言。它为您的浏览器生成 HTML 和 Javascript - 但除此之外，它与您的问题和问题完全无关。

---

现在，解决你的问题

您尝试将监听器附加到尚未呈现的元素:

$(".boldtrigger")

这会寻找一个类为 boldtrigger 的元素，并尝试用它做一些事情。但是，您的元素只会在这段代码之后呈现。

有两个修复:

1。事件委托(delegate)

使用以下代码:

$('body').on('click', '.boldtrigger', function(){
    $(".boldtrigger").toggleClass("bold");
});

您可以在主体上附加一个监听器，该监听器将等待事件从 .boldtrigger 冒泡。当您需要在元素出现在场景之前附加事件时，这会起作用。

Read more about the idea of event delegation here

Check out more about jQuery.on() here

2。重新订购您的代码

另一种选择是将 JavaScript 移动到页面底部，或者至少在 HTML 下方:

<?php
print "<script type=\"text/javascript\">\n";

echo "<tr class = 'oddkill' ><td class = 'entry_cell' ><a href = \"javascript: displayRow('context_row_${row_paridy}') \" class = 'boldtrigger' style = 'color:black'>$test</a></td>";


/*Now for Js Part*/
echo <<<JS

$(".boldtrigger").click(function(){
    $(".boldtrigger").toggleClass("bold");
});
JS;

3。 $(文档)就绪()

几乎每次使用 jQuery 时，您都希望将它包装在如下所示的函数中:

$(document).ready(function () {
    // Some code
});

或者这个:

$(function() {
    // Some code
});

You probably want to brush up on some jQuery basics if you aren't aware of that.

Or, better yet - start with plain old Javascript!

如果您认为 jQuery 比普通/原始 Javascript 更容易 - 您可能会感到惊讶。现在是 2016 年，我们有 大量 很棒的新 API，它们使普通的旧 Javascript 变得非常酷。

换句话说:

You really don't need jQuery

---

题外话

您可能想要更改您的 JavaScript 代码。现在，.boldtrigger 的每次出现都将在您单击其中的任何 时切换该类。

如果你只想切换被点击的元素，你可能想要更接近于此的东西:

$(this).toggleClass("bold");

Read more about this keyword here