点击按钮打印按钮下标

最新推荐文章于 2021-06-17 13:17:53 发布

Narakunah

最新推荐文章于 2021-06-17 13:17:53 发布

阅读量478

点赞数

CC 4.0 BY-SA版权

分类专栏：面试题文章标签：按钮下标闭包数组对象

本文链接：https://blog.youkuaiyun.com/weixin_42029451/article/details/80054033

面试题专栏收录该内容

3 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<input type="button" value="0">
<input type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<input type="button" value="4">
<input type="button" value="5">
<input type="button" value="6">
<input type="button" value="7">
<input type="button" value="8">
<input type="button" value="9">

<script>
    // 1. 通过对象属性
    //    var inps = document.querySelectorAll("input");
    //    for (var i = 0; i < inps.length; i++) {
    //        inps[i].index = i;
    //        inps[i].onclick = function () {
    //            console.log(this.index);
    //        }
    //    }

    //2. es6 let
    //    var inps = document.querySelectorAll("input");
    //    for(let i = 0;i < inps.length; i++){
    //        inps[i].onclick= function(){
    //            console.log(i);
    //        }
    //    }

    // 3. forEach 数组的方法
    //    var inps = document.querySelectorAll("input");
    //    inps.forEach(function (v,i) {
    //        inps[i].onclick = function(){
    //            console.log(i);
    //        }
    //    })



    // 4. 闭包
    //    var inps = document.querySelectorAll("input");
    //    for(var i = 0;i<inps.length;i++){
    //        (function(i){
    //            console.log(i);
    //        })(i)
    //    }



    // 5. 闭包
    var inps = document.querySelectorAll("input");
//    for(var i = 0;i< inps.length; i++){
//        function outer(num){
//            function fn(){
//                console.log(num);
//            }
//            return fn;
//        }
//        var temp = outer(i);
//        inps[i].onclick = temp;
//    }

    for(var i = 0; i < inps.length; i++){
        inps[i].onclick = (function(num){
            return function(){
                console.log(num);
            };
        })(i);
    }
</script>
</body>
</html>