JS里获取到for循环中i的实时值。

来源:互联网 发布:易语言玫瑰花表白源码 编辑:程序博客网 时间:2024/06/05 13:25

在使用for循环的时候经常发现i的值在子函数里永远为最大值,其中涉及到的作用域问题就不再多说了。只在这里简单说一下使用闭包和自执行函数的解决方法;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
html,body{
    height: 100%;
    padding: 0;
    margin: 0;
}
.button{
    height: 40px;
    width: 150px;
    position:relative;
    top: 50%; 
    left: 50%;
    margin-top: -20px;
    margin-left: -75px;
}
</style>
</head>
    <body>
        <div class="button">
            <button>1</button>
            <button>2</button>
            <button>3</button>
            <button>4</button>
            <button>5</button>
        </div>
        <script>
           var abc=document.getElementsByTagName("button")
      /*for (var i = 0; i <abc.length; i++) {
               this.onclick=function(){
                alert(i)    //函数获取不到i则去父级寻找, 这时i已经循环为5,所以i永远为5
            }
        };  */
     /*    for (var i = 0; i < abc.length; i++) {
            (function(e){
                alert(e)   //自执行函数,把i传入e,可以获取到i的各个数值
            })(i)
        };*/
        for (var i = 0; i < abc.length; i++) {
            (function(e){  //自执行函数实时把i传入e
                abc[e].onclick=function(){  //  通过传入的e获取到哪个按钮发生了点击事件
                    alert(e) //弹出e(此处e为i实时对应值)
                }
            })(i)    
        };   //采用闭包和自执行函数获取i
        </script>
    </body>
</html>

0 0
原创粉丝点击