今天在做如题目说的效果（如下代码）时，发现在时间注册函数中判断循环值出现问题。所有的节点的点击事件后都是第一行高亮。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <ul id = "node"> <li>下一个兄弟节点高亮</li> <li>下一个兄弟节点高亮</li> <li>下一个兄弟节点高亮</li> <li>下一个兄弟节点高亮</li> <li>下一个兄弟节点高亮</li> </ul> <script> var node = document.getElementById("node"); var li = node.children; for(var i=0; i<li.length-1; i++){ var link = li[i]; link.onclick = function(){ if(i<li.length-1){ for(var j=0; j<li.length; j++){ var templink = li[j]; templink.style.backgroundColor = ""; } console.log("this......"); this.nextElementSibling.style.backgroundColor = "blue"; }else{ for(var j=0; j<li.length; j++){ var templink = li[j]; templink.style.backgroundColor = ""; } console.log("this......"); li[0].style.backgroundColor = "blue"; } } } </script> </body> </html>问题定位：循环操作和注册事件发生的时间不一致。循环是即时完成，而事件则是在用户操作界面触发事件时才发生的。在事件触发时，循环已经完成，所以事件中的i值是循环的终点值（li.length）。
1.基于上面的原因，在循环中，采用this来识别当前的点击对象，因为事件处理函数中的this:指的是事件源，谁调用的事件函数，this就指向谁；
2.在函数中如果需要判断循环体的控制次数的变量值，必须将判断放在循环体外面。
最终的实现代码如下：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <ul id = "node"> <li>下一个兄弟节点高亮</li> <li>下一个兄弟节点高亮</li> <li>下一个兄弟节点高亮</li> <li>下一个兄弟节点高亮</li> <li>下一个兄弟节点高亮</li> </ul> <script> var node = document.getElementById("node"); var li = node.children; for(var i=0; i<li.length-1; i++){ var link = li[i]; link.onclick = function(){ for(var j=0; j<li.length; j++){ var templink = li[j]; templink.style.backgroundColor = ""; } console.log("this......"); this.nextElementSibling.style.backgroundColor = "blue"; } } li[li.length-1].onclick = function(){ for(var j=0; j<li.length; j++){ var templink = li[j]; templink.style.backgroundColor = ""; } console.log("this......"); li[0].style.backgroundColor = "blue"; } </script> </body> </html>
