首頁猿問如下程序，請問為什么這里的cons...

如下程序，請問為什么這里的console.log(i)是5？

JavaScript 小程序

紫衣仙女 2022-01-05 11:07:48

<!DOCTYPE html><html><head><title>test</title></head><body><ul><li>11111</li><li>22222</li><li>33333</li><li>44444</li><li>55555</li></ul></body><script type="text/javascript">var ul1 = document.getElementsByTagName('ul')[0];var lis = ul1.children;for(var i=0 ; i<lis.length ; i++){ lis[i].onclick = function(){ console.log(i)// lis[i].parentNode.removeChild(lis[i]);// this.parentNode.removeChild(this);}}</script></html>

查看完整描述

2 回答

叮當(dāng)貓咪

TA貢獻(xiàn)1776條經(jīng)驗獲得超12個贊

onclick 里不應(yīng)該直接使用 i ，這是一個變量
當(dāng)你 for 結(jié)束時，i 的值已經(jīng)是 5 了，所以所有的 onclick 的 i =5
如果要操作文檔對象，盡量使用 ID、Class 等有固定特征的方式
操作父級、上、下關(guān)聯(lián)對象，艸使用 this 會方便一些，在操作對象時，this 在此時代表對象本身。

反對回復(fù) 2022-01-09

qq_花開花謝_0

TA貢獻(xiàn)1835條經(jīng)驗獲得超7個贊

你好，原因很簡單，因為js沒有塊作用域的概念，循環(huán)var的i，直到循環(huán)結(jié)束還在整個作用域之內(nèi)，而當(dāng)click事件觸發(fā)的時候，循環(huán)早就結(jié)束了，i的值只能是最大值，所以總是得到5。

下面是能實現(xiàn)你功能的正確方法之一：

<html><head> <meta charset='utf-8'> <style> </style> <script> window.onload=function(){ var oButton = document.getElementsByTagName("button"); num=0; for(var i=0;i<oButton.length;i++){ oButton[i].onclick=(function(idx){ return function(){ console.log(idx + 1); oButton[num].style.background="#ccc"; num=idx; this.style.background="#ff0000"; } })(i); } } </script></head><body> <button >點擊1</button> <button >點擊2</button> <button >點擊3</button> <button >點擊4</button> <button >點擊5</button></body></html>