Facebook页面JavaScript：无法重用功能

Question

我正在Facebook上使用FBML和JavaScript在画布选项卡上制作自定义页面。

我想制作一个滑块，就像你通常用jQuery做的那样，不幸的是Facebook没有jQuery支持（还没有），所以我想我会用普通的旧JavaScript制作幻灯片。

在使用slide()函数一次后，在控制台Firebug中出现“slide（）不是函数”错误。

下面的代码：

<script> 
    <!-- 
     function slide(reqPos){ 
      desSlideState = reqPos; 
      curSlideState = getCurSlideState(); 
      toSlide = desSlideState - curSlideState; 
      pxToSlide = toSlide * (-520); 

      movCount = 0; 
      timer = setInterval(function(){eSlide(slide, pxToSlide);},100); 
     } 
     function getCurSlideState(){ 
      slide = document.getElementById("slider"); 
      var slideLeft = slide.getStyle("left"); 
      var slideLeft = parseFloat(slideLeft); 
      var slideState = slideLeft/-520; 
      return slideState; 
     } 
     function eSlide(elemToMove, lengthToMove){ 
      curLeft = elemToMove.getStyle("left"); 
      curLeft = parseFloat(curLeft); 

      newLeft = curLeft + (lengthToMove/10); 
      elemToMove.setStyle("left", newLeft + "px"); 

      movCount++; 

      if(movCount == 10){ 
       clearInterval(timer); 
       return false; 
      } 
     } 
    //--> 
</script> 

<div id="fb-wrapper"> 
    <h1>Loads Solutions LTD</h1> 

    <div class="loads-nav-wrap"> 

     <div class="fb-nav" id="nav1"><a href="http://www.loads.co.il/hosting.php" onclick="slide(0); return false;">Server<br />Hosting</a><div></div></div> 

     <div class="fb-nav" id="nav2"><a href="http://www.loads.co.il/dedicated.php" onclick="slide(1); return false;">Dedicated<br />Servers</a><div></div></div> 

     <div class="fb-nav" id="nav3"><a href="http://www.vcp.co.il/" onclick="slide(2); return false;">Web Design<br />&Development</a><div></div></div> 

     <div class="fb-nav" id="nav4"><a href="http://www.loads.co.il/vps.php" onclick="slide(3); return false;">VPS</a><div></div></div> 

     <div class="fb-nav" id="nav5"><a href="http://www.loads.co.il/exchange.php" onclick="slide(4); return false;">Exchange MailBoxes</a><div></div></div> 
</div> 

<div id="content-slide"> 
    <div id="slider" style="left:0"> 
     <div class="slide-content"> 
      <h3 id="test-id">content1</h3> 
     </div> 
     <div class="slide-content"> 
      <h3>content2</h3> 
     </div> 
     <div class="slide-content"> 
      <h3>content3</h3> 
     </div> 
     <div class="slide-content"> 
      <h3>content4</h3> 
     </div> 
     <div class="slide-content"> 
      <h3>content5</h3> 
     </div> 
    </div> 
</div> 

不要担心HTML不是有效的网站，Facebook画布本来不会工作。

Answer 1

这里这条线覆盖你slide功能：

slide = document.getElementById("slider"); 

你需要一个var，使之地方，像这样：

var slide = document.getElementById("slider"); 

没有var它设置为全局变量。 ..从早期写你的slide功能。 总是把var当声明一个局部变量，否则它可能会导致像这里所做的全局冲突。