Question

一个JS的，关于for循环的问题。

第一个：
window.onload=function()
{
var aBtn=document.getElementById('btn').getElementsByTagName('a');
var aDiv=document.getElementById('div1').getElementsByTagName('div');
var i=0;
for(i=0;i<aBtn.length;i++)
{
aBtn[i].index=i;
aBtn[i].onclick=function()
{
for(i=0;i<aBtn.length;i++)
{
aBtn[i].className=''
aDiv[i].style.display='none'
}
this.className='active'
aDiv[this.index].style.display='block'
}
}
}
第二个：
window.onload=function ()
{
var oBtn=document.getElementById('btn1');
var oTab=document.getElementById('tab1');
var oTxt=document.getElementById('txt1');

oBtn.onclick=function ()
{
var i=0;

for(i=0;i<oTab.tBodies[0].rows.length;i++)
{
var sValueInTab=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
var sValueInTxt=oTxt.value.toLowerCase();
var arr=sValueInTxt.split(' ');

var bFound=false;//定义一个新参数,检测是否被搜索到

for(var j=0;j<arr.length;j++)
{
if(sValueInTab.search(arr[j])!=-1)
{
bFound=true;
break;
}
}

if(bFound)
{
oTab.tBodies[0].rows[i].style.background='yellow';
}
else
{
oTab.tBodies[0].rows[i].style.background='';
}
}
};
};
上面两个程序，第一个是tab标签，第二个是为了实现搜索功能写的。
第一个的两个for循环，我都用i，程序都没问题。
但是第二个JS代码里面，第一个for循环用了i，而第二个for循环必须使用j。
问题就是，为什么第一个的两个for循环可以使用两个i，而第二个的一个for循环用i，而另一个必须使用别的变量？两个JS代码里面，两个for循环，存在什么差别？

Answer 1

注意，你第一个方法里，第二次的for循环是在aBtn[i].onclick事件里的，也就是说，第二个for循环是点击了aBtn[i]这个按钮后才执行，而这时候跟前面第一个循环里定义的i变量已经没有任何关系了