<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="bootstrap.css">
</head><body> <div class="container"> <div class="row"> <div class="col-md-3"> <hr> <div class="panel panel-info"> <div class="panel-heading"> <h3 class="panel-title">闭包经典实例</h3> <div> <div class="panel-body"> <ul class="list-group"> <li class="list-group-item">1</li> <li class="list-group-item">2</li> <li class="list-group-item">3</li> <li class="list-group-item">4</li> <li class="list-group-item">5</li> </ul> </div> </div> </div> </div> </div> </div> </div> <script > var liList=document.getElementsByTagName(‘li‘);
for(var i=0;i<liList.length;i++){
liList[i].number=i; liList[i].onclick=function(){ alert(this.number) }
// (function (i){// liList[i].onclick=function( ){// alert(‘当前点击第‘+ i+‘个‘);// }// })(i) } </script></body></html>
像这样一个代码片段,初学者会理所当然地认为依次点击Li会弹出相应的0、1、2、3、4 但实际结果是每次都是4原因是：每次点击输出i的时候，函数内部没有i,就从外部函数查找，而外部函数的值是每一次循环后的值4，所以每次点击输出的都是4
解决办法一：加一层闭包，i 以函数参数形式传递给内层函数：
(function (i){ liList[i].onclick=function( ){ alert(‘当前点击第‘+ i+‘个‘); } })(i)
解决办法二：找个属性将i值保存起来，然后弹出这个值
liList[i].number=i; liList[i].onclick=function(){ alert(this.number) }
原文地址：https://www.cnblogs.com/zhumingyong/p/8994636.html
时间： 2024-10-10 21:16:46