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

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&nbsp;class="..."&nbsp;role="alert"&nbsp;onclick="#powerfulFTP">虽然尚不清楚问题出在哪里，但是该onclick属性需要一个表达式，而不是字符串。它试图将字符串作为表达式求值，从而导致错误。您可能应该在数据属性中传递字符串：data-whatever="#powerfulFTP"然后抓住它：$(&nbsp;$(this).data('whatever')&nbsp;).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");它将正常工作。