-1

我在这里有一个功能可以切换打开/关闭 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>";
    }
}

错误是Uncaught SyntaxError: Unexpected token }。我尝试了很多方法来解决它，但我想我的眼睛今天不工作了......有人可以帮忙吗？谢谢！

PS 如果有帮助，我正在使用 Chrome。

编辑

这是HTML代码：

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

2 回答 2

2

您要添加的元素的 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');
});
于 2012-07-11T13:36:33.893 回答
0

有更好的方法可以做到这一点，混合 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);
}
于 2012-07-11T13:52:46.713 回答