JavaScript/jQuery动画错误:未捕获的语法错误:意外的令牌｝

JavaScript / jQuery animate error: Uncaught SyntaxError: Unexpected token }

本文关键字：错误 语法 意外 令牌 jQuery 动画 JavaScript      更新时间：2023-09-26

我这里有一个函数，可以切换打开/关闭div:

function searchAnimate(goTo) {
    if (goTo == "open") {
        $("#searchdiv").animate({
            bottom: 2,
            right: 0
        }, 1500);
        document.getElementById("openclosearrow").innerHTML = "<div onclick='searchAnimate('close')' id='openclosearrow'>&harr;</div>";
    }
    if (goTo == "close") {
        $("#searchdiv").animate({
            bottom: -45,
            right: -218
        }, 1500);
        document.getElementById("openclosearrow").innerHTML = "<div onclick='searchAnimate('open')' id='openclosearrow'>&harr;</div>";
    }
}

错误为未捕获的SyntaxError:意外的令牌}。我试过很多方法来修复它，但我想我的眼睛今天就是不工作了。。。有人能帮忙吗？Thx！

附言：如果有帮助的话，我正在使用Chrome。

编辑

这是HTML代码：

<div onclick="searchAnimate('close')" id="openclosearrow">&harr;</div>

要添加的元素的HTML中有引号。

此外，看起来您正试图通过设置元素的innerHTML来替换它。这也是行不通的。

您只需要该元素上的一个处理程序，以及某种标记来指示它处于什么状态。处理程序可以使用它来知道点击是应该打开还是关闭。

也许是这样的：

<div id='openclosearrow' class='open'>&harr;</div>

然后，在JavaScript:中

$('#openclosearrow').click(function() {
  var arrow = this, $arrow = $(arrow),
    animations = {
      open: { bottom: 2, right: 0 },
      close: { bottom: -45, right: -218 }
    };
  $('#searchdiv').animate(animations[ $arrow.is('.open') ? 'close' : 'open' ], 1500);
  $arrow.toggleClass('open');
});

有更好的方法可以做到这一点，DOM和jQuery的混合是个坏主意，选择一种方法使其成为标准。

代码的一个问题是引号是错误的，它们需要转义

"<div onclick='"searchAnimate('open')'" id='openclosearrow'>&harr;</div>"

这里的问题是，您正在用相同的代码替换元素的innerHTML，因此在第一次替换之后，它看起来像这样

<div onclick="searchAnimate('close')" id="openclosearrow"><div onclick="searchAnimate('close')" id="openclosearrow">&harr;</div></div>

我怀疑那是你想要的。

您应该做的是替换事件处理程序。

$("#openclosearrow").off("click").on("click",function(){ searchAnimate('open') });

更好的方法是不替换单击处理程序，而是检测状态。

function searchAnimate() {
    var stateSettings,
        newState,
        elem = $("#searchdiv");
    if (elem.data("state")==="open") {
        newState = "close";
        stateSettings = {
            bottom: 2,
            right: 0
        };
    } else {
        newState = "open";
        stateSettings = {
            bottom: -45,
            right: -218
        }
    }
    elem.data("state",newState).animate(stateSettings, 1500);
}
相关文章：