如下程序，请问为什么这里的console.log(i)是5？
<!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>
紫衣仙女浏览 213回答 2
2回答
-
叮当猫咪
onclick 里不应该直接使用 i ，这是一个变量当你 for 结束时，i 的值已经是 5 了，所以所有的 onclick 的 i =5如果要操作文档对象，尽量使用 ID、Class 等有固定特征的方式操作父级、上、下关联对象，艹使用 this 会方便一些，在操作对象时，this 在此时代表对象本身。 -
qq_花开花谢_0
你好，原因很简单，因为js没有块作用域的概念，循环var的i，直到循环结束还在整个作用域之内，而当click事件触发的时候，循环早就结束了，i的值只能是最大值，所以总是得到5。下面是能实现你功能的正确方法之一：<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>
随时随地看视频慕课网APP
相关分类
JavaScript
小程序