关于javascript赋值的问题

Question

需求很简单，但总是找不到它为什么会这样！
需求是点击A中的某个元素，在B中复制显示这个元素，但，结果总是最后一个元素，请各位帮忙一下？
[code="HTML"]

[/code]
[code="javaScript"]
var left = document.getElementById("left");
var right = document.getElementById("right");
function aa(){

for(var i=0;i<10;++i){
var li = document.createElement("li");
li.style.listStyleType="none";
li.innerHTML="aaaa"+i;
li.style.cursor = "hand";
li.setAttribute("test",i);
li.onclick=function()
{
copyli(li);
};
left.appendChild(li);

    }

}
function copyli(obj)
{
var li=document.createElement("li");
li.style.listStyleType="none";
li.innerHTML=obj.innerHTML;
right.appendChild(li);
}
[/code]

Answer 1

[code="js"]
var left = document.getElementById("left");
var right = document.getElementById("right");
function aa(){
// 用于创建回调的方法，使用闭包保存当前传入的值
var createCb = function(dom){
return function(){
copyli(dom);
};
};

for(var i=0;i<10;++i){
var li = document.createElement("li");
li.style.listStyleType="none";
li.innerHTML="aaaa"+i;
li.style.cursor = "hand";
li.setAttribute("test",i);
/*li.onclick=function()
{
copyli(li); // <---JS中变量是函数级的，for循环内外定义效果是一样。所以这里所有的onclick执行时都是访问同一个li变量。
};*/
// 改为这样：
li.onclick=createCb(li); //
left.appendChild(li);

    }

}
function copyli(obj)
{
var li=document.createElement("li");
li.style.listStyleType="none";
li.innerHTML=obj.innerHTML;
right.appendChild(li);
}

[/code]