Javascript 使用先前值的后续函数调用

CSS

body{  
  background:#000;   
  width:320px;  
 height:480px;  
}  

.view  
{  
   width:320px;   
   height:480px;   
   background:#0066CC;  
   overflow:hidden;  
   visibility:hidden;  
   position:absolute;   
   left:0;top:0;  
   z-index:8; 
}  

.o{background:#FF9900;}   

.main{ visibility:visible;}  

.swapper {
  width:640px;  
 height:480px;   
  overflow:hidden;   
  position:absolute;  
   left:0;top:0;  
  visibility:hidden;  
  z-index:9;
 }  
 .on{position:static; float:left; visibility:visible;}  

 .btn {height:50px; width:125px; font-size:16px; background:#000; color:#FFF;}

JavaScript

function $(id)
{
    return document.getElementById(id);
}

function clean()
{
        alert("1");
        ele = $("swapper");
        ele.removeEventListener("webkitTransitionEnd" , clean , true);
        //ele.style.webkitTransition = "height 0s";
        ele.style.webkitTransform = "translate3d(0px,0,0)";
        ele.zIndex = "7";
        ele.style.visibility = "hidden";
        //currentView = nextView;

}
function show(current , next)
{

    alert(current+ "    " + next);
    //nextView = next;
    s = $("swapper");
    s.innerHTML = "";
    nel = $(next);
    cel = $(current);
    v1 = cel.cloneNode(true);v2 = nel.cloneNode(true);

    v1.id = "v1";  v1.onclick = ""; v1.className += " on";
    v2.id = "v2";  v2.onclick = ""; v2.className += " on";

    s.appendChild(v1);  s.appendChild(v2);
    s.style.webkitTransition = "-webkit-transform 1s ease";

    s.style.zIndex = "9";
    s.style.visibility = "visible";
    nel.style.visibility = "visible";
    cel.style.visibility = "hidden";



    //s.style.left = "0px";
    s.addEventListener("webkitTransitionEnd" , clean, true);
    s.style.webkitTransform = "translate3d(-320px,0,0)";
    //setTimeout(clean , 1000);
}

HTML

<div id="swapper" class="swapper"></div>

<div id="container">
    <div id="set1">
        <div id="main" class="view main o"><h1>1</h1><span class="btn" onclick="show('main','2');">Next</span></div>
        <div id="2" class="view"><h1>2</h1><span class="btn" onclick="show('2','3');">Next</span></div>
        <div id="3" class="view o"><h1>3</h1><span class="btn" onclick="show('3','4');">Next</span></div>
        <div id="4" class="view"><h1>4</h1><span class="btn" onclick="show('4','main');">Next</span></div>
    </div>
</div>

</body>

1下一步
第2条
3下一步
4下一步

---

我试图创建滑动面板，但调用此javascript函数时，会使用以前的值执行一次，然后使用新值执行一次。

这种菜单称为水平手风琴。jQuery有无数的简单插件——为什么要重新发明轮子呢？有很多例子：

示例

---

我没有运行您的代码，但请注意，在克隆元素时，内联添加的侦听器将被保留，但由addEventListener添加的侦听器将被删除。谢谢，问题已经解决，现在我有另一个问题，iphone 2g 3.1.3上的窗格没有动画。它在iphone4和iPod4上运行良好这不是accodion。它更像是一只甲壳动物。我是为iphonewebapp做的，这是一个简单的脚本，jquery，然后是插件开销。我只需要解决一个小问题。很难从你的代码中看出你想要的是什么效果。也许是这样的？是的，差不多。我已经让代码工作了，RobG的建议工作了。但现在的问题是它不能在iPhone 2g上运行iPhone 2g浏览器可能不支持CSS3动画。它确实支持CSS3和webkit translate3d，但我用来制作动画的一个属性可能不受iPhone 2g支持