如何确定导致错误的“令牌”？

Question

我正在建立一个使用jQuery来显示和隐藏页面内容的页面。我已经使代码正常工作，但是当它在浏览器的控制台中完成时会出错：“未捕获的SyntaxError：无效或意外的令牌”但是我看不到它注入了什么无效或意外的令牌。我已经通过检查器运行了代码，代码没有任何问题，只是希望有人能够对我应该使用的没有这些问题的内容有所了解。我还创建了一个小提琴，以运行并检查这些错误，以确保它不是由于当前代码位置而引起的。jQuery(document).ready(function($) {    $(".featuresList").on("click", ".alert-cerberus", function(e) {        e.preventDefault();        $(".alert-cerberus").removeClass("active");        $(".featuresContent").removeClass("show");        $(this).addClass("active");        $($(this).attr('onclick')).addClass("show");    });});这是我设置的js小提琴来复制此内容：https : //jsfiddle.net/jgilbertdesign/2j3xzbad/14/#&togetherjs=GxhzJJBHus该代码应使所选择的选择面板显示不同的颜色，并使内容显示在页面上。类似于基于jQuery的hide / show函数，但无需构建多行代码来对其进行备份。

Answer 1

“令牌”仅指事物，可以是字符串，变量或其他任何东西。在这种情况下，单击错误会将您定向到标记中的以下行：

<div class="..." role="alert" onclick="#powerfulFTP">

虽然尚不清楚问题出在哪里，但是该onclick属性需要一个表达式，而不是字符串。它试图将字符串作为表达式求值，从而导致错误。

您可能应该在数据属性中传递字符串：

data-whatever="#powerfulFTP"

然后抓住它：

$( $(this).data('whatever') ).addClass('show');

（whatever也许应该是事物本身的语义术语data-parentId。）

演示版

另外，preventDefault由于您不是在使用锚，因此您不需要在这里。

不请自来的提示：

• 请注意document.ready我的演示中的速记。保存一些打字。

• 对JS使用单引号，对HTML使用双引号可以避免一些麻烦。

Answer 2

这个问题是在jQuery委托事件处理程序之前onclick=启动的。

因此，浏览器会看到onclick='#powerfulFtp'并尝试对其进行评估，从而产生错误。

更改<div onclick='#abc'>为<div data-onclick='#abc'>，事件来自

$($(this).attr('onclick')).addClass("show");

至

$($(this).data('onclick')).addClass("show");

它将正常工作。