關於實現點選一行，下一行變色問題
阿新 • • 發佈：2018-12-09
今天在做如題目說的效果（如下程式碼）時，發現在時間註冊函式中判斷迴圈值出現問題。所有的節點的點選事件後都是第一行高亮。
<!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>