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 canvas不会起作用.

Answer 1

这一行是覆盖你的slide功能:

slide = document.getElementById("slider");

你需要一个var让它成为本地的,像这样:

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

没有var它将它设置为全局变量... slide从早期覆盖您的功能. 在声明局部变量时总是放置var,否则可能会像在此处一样导致全局冲突.