Question

关于在javaScript中使用for嵌套循环的变量使用问题

function $(id){
return typeof id==="string"?document.getElementById(id):id;
}
window.onload=function(){
//标签的索引
var index=0;
var timer=null;
var lis=$('notice-tit').getElementsByTagName('li');
var divs=$('notice-con').getElementsByTagName('div');
if(lis.length!=divs.length) return;
//遍历所有页签
for(var i=0;i<lis.length;i++){
lis[i].id=i;
lis[i].onmouseover=function(){
//用that这个变量来引用当前滑过的li;
var that=this;
//如果存在准备执行的定时器，立刻清楚
if(timer){
clearTimeout(timer);
timer=null;
}
//延迟半秒执行
timer=setTimeout(function(){
for(var j=0;j<lis.length;j++){
lis[j].className='';
divs[j].style.display='none';
}
lis[that.id].className="select";
divs[that.id].style.display="block";
//lis[i].className="select";
//divs[i].style.display="block";
这两行屏蔽的代码是我想用的，替换上面两行，为什么不能直接用这个i 变量呢 ？
},2000);
}
}
}

Answer 1

你这两行代码是在lis[i].onmouseover这个事件过程中的，也就是说它们并不是在for循环中直接执行的，而是在鼠标划过对应的li时才执行的，这个时候for循环早就运行完毕了，那么lis[i].className="select";中的这个i跟for循环的i就不存在关系了（即使有关系，它也是个固定值了，即lis.length，也就是for的循环终值）。这种情况下只能在对事件过程初始化的时候把i通过对象属性（lis[i].id）传递到事件过程内。

追问

也就是for循环执行完之后，鼠标来回滑动就不能触动for循环了，我以为鼠标滑动会再次执行呢。 还有就是用lis[i].id=i 在for循环中给元素添加ID值，这种形式也能行？好方便啊 。

然后我换成lis[i].class=i 为什么不行呢 还有就是随便一个字符串如lis[i].abc=i 也不行，是不是只能添加ID？

追答

不是随便什么属性都可以乱用的。当然你弄个自定义属性也可以，但方法得换换：
lis[i].setAttribute("abc",i);
读取的时候则要这样：
that.getAttribute("abc")