1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 .page{border: 1px red solid;} 8 .up{width:300px;height:50px;} 9 .a{width:90px;height:50px;float: left;border: 1px pink solid;} 10 .down1{width:300px;height:200px;border:1px black solid;padding-top: 10px;} 11 </style> 12 </head> 13 <script> 14 window.onload=function(){ 15 var up=document.getElementsByClassName("a") 16 var down=document.getElementsByClassName("down1") 17 console.log(down) 18 for(var i in up){ 19 up[i].index=i; 20 down[i].index=i 21 22 23 up[i].onmouseover=function(){ 24 //this.style.background="skyblue" 25 26 console.log(this.index) 27 for(var j=0;j<down.length;j++){ 28 console.log(down[j].index) 29 if((this.index)==(down[j].index)){ 30 31 down[j].style.background="skyblue" 32 33 } 34 35 36 37 38 } 39 } 40 } 41 42 } 43 44 45 </script> 46 <body> 47 <div class="page" style=" 300px;height:300px;"> 48 <div class="up" id="up"> 49 <div class="a">aaa</div> 50 <div class="a">bbb</div> 51 <div class="a">ccc</div> 52 </div> 53 <div class="down1" style="display: block;" >qqq</div> 54 <div class="down1" style="display: none;">www</div> 55 <div class="down1" style="display: none;">eee</div> 56 57 </div> 58 </body> 59 </html>
以上是一个，下面也是一个：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 table{ border-left: 1px solid gray; border-top: 1px solid gray; width: 300px;} 8 td{ border-bottom: 1px solid gray; border-right: 1px solid gray;} 9 .hide{ display: none;} 10 .selected{ border-bottom: 1px solid white;} 11 </style> 12 13 <script> 14 window.onload=function(){ 15 16 var tr=document.getElementById("table").getElementsByTagName("tr") 17 var td=tr[0].getElementsByTagName("td") 18 19 20 for(var i=0;i<td.length;i++){ 21 td[i].index=i 22 td[i].onmouseover=function(){ 23 for(var j=1;j<tr.length;j++){ 24 if(this.index+1 == j){ 25 td[j-1].className='selected'; 26 tr[j].className=''; 27 }else{ 28 td[j-1].className=''; 29 tr[j].className='hide'; 30 } 31 } 32 33 34 } 35 36 } 37 } 38 39 40 </script> 41 </head> 42 <body> 43 <table id="table" border="0" cellpadding="0" cellspacing="0"> 44 <tr> 45 <td class="selected">aaa</td> 46 <td>bbb</td> 47 <td>ccc</td> 48 </tr> 49 <tr> 50 <td colspan="3">a1<br>a2<br>a3</td> 51 </tr> 52 <tr class="hide"> 53 <td colspan="3">b1<br>b2<br>b3</td> 54 </tr> 55 <tr class="hide"> 56 <td colspan="3">c1<br>c2<br>c3</td> 57 </tr> 58 </table> 59 </body> 60 </html>
注意到我们在中间都是用了index这个新添加的属性，如果我们不使用这个属性而直接使用i来代替，即24行为if(i+1 == j){
结果就会发现，所有的下半部分内容都被隐藏起来了，而在22和23行之间插入console.log(i)你就会发现i输出结果都是3.
这是因为在绑定事件的时候并不是
i=0-》开始绑定-》将i=0继续代入事件中作为参数-》完成-》继续，并开始下一个循环i=1
而是：
i=0 ->开始绑定事件-》异步绑定事件，同时，i变为1，开始继续绑定事件-》.....
由于绑定事件并不是和i的增加是同步的，即，在i顺序执行的时候，绑定事件被抛出了这一个执行列表，跑到了另一个执行列表当中，而这个异步执行列表的速度有没有原来的快，所以——【当事件开始绑定的时候，循环已经结束，i已经成为了最大值。】
—————————— 抛出 ————————————
i=0 -------》》》 绑定事件1
—————————— ——————————————
i=1 -------》》》 绑定事件2
—————————— ——————————————
i=2 -------》》》 绑定事件3
—————————— ——————————————
.....
.....
(还没完？） 绑定结束
—————————— ——————————————
(赶紧给我） 《《《------ 交还结果
顺序执行表 异步执行表
循序执行很快（毕竟就是循环，几乎是瞬间完成），所以在顺序执行完毕后，异步才慢慢开始绑定，最终将结果加载回来。