的JavaScript/jQuery的動畫錯誤：未捕獲的SyntaxError：意外的標記}

Question

我這裏有一個功能，切換打開/關閉一個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：意外的標記}。我試圖用多種方法解決它，但我猜我的眼睛今天不能工作......任何人都可以幫忙嗎？謝謝！

P.S.如果有幫助，我使用Chrome。

編輯

下面是HTML代碼：

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

Answer 1

有這樣做的，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); 
} 

Answer 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'); 
});