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。）

Demo

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

不请自来的提示：

请注意我的演示中的document.ready速记。保存一些打字内容。
对于JS使用单引号，对于HTML使用双引号可以避免一些麻烦。

Answer 2

此问题是onclick=在jQuery委托事件处理程序的之前插入。

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

将<div onclick='#abc'>更改为<div data-onclick='#abc'>，并将事件从

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

到

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

它将正常工作。

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

2 个答案: