需求很简单，但总是找不到它为什么会这样！
需求是点击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]
[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]
当你循环到i=9的时候，此时虽然页面上已经显示出各种值了，但是，客户端的变量li的值是退出循环时候的临时变量值（li.innerHTML=aaa9）。
而此时每个列表的onclick事件绑定的都是li变量入参，就不难想象都是aaa9了。
其实，这个变量的引用比较相似（恕我用词可能不当）