javascript - for循环语句实现指定按钮动作下的指定对话框-PHP中文网问答

搜索

微信公众号

首页文章专题 AI工具学习编程手册下载最近更新

文章 web3.0 后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具 AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习大前端后端开发数据库移动端运维开发 UI设计计算机基础

编程手册大前端 JavaScript 后端开发数据库移动端运维开发 UI设计计算机基础 XML Web Services

下载 js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

问题的根源

变量提升现象

window.onload = function(){
    var body = document.getElementsByTagName('body')[0];
    var btn = document.getElementsByTagName('button');
    var array = ['one','two','three','four','five'];
    
    for(var num = 0;num<btn.length;num++) {
        btn[num].onclick = function () {
            console.log(num)
        }
    }
}

因为onclick是在浏览器触发其事件的时候才会执行,因此他是一个异步执行的函数,无论如何都会在这段代码执行完成之后才会执行,而此时javascript已经完成了这段代码的for循环,num的值也早就变成了btn.length-1了,这种现象叫做变量提升

解决方法

方法1,使用bind方法产生一个绑定参数而且延时执行的方法

for(var num = 0;num<btn.length;num++) {
    btn[num].onclick = (function (n,e) {
        console.log(n);
        console.log(array[n])
    }).bind(this, num);
    //使用bind把函数柯里化,注意的是bind会产生一个新的方法,注意此时原有的event参数会到第二个参数
}

-方法2,创建一个创建一个新的函数并用其作用域参数保存num值,防止变量提升,（闭包）

for(var num = 0;num<btn.length;num++) {
    btn[num].onclick = (function (n) {
       return function (e){
           console.log(n);
           console.log(array[n])
       }
    })(num)
}

-方法3,let关键字,可以在nodejs用于解决变量提升,支持let的浏览器也可以一战(MS Edge、Chrome等)

for(var num = 0;num<btn.length;num++) {
    let n = num; //let关键字生成的变量只会在当前{}代码块中,不会产生变量提升现象
    btn[num].onclick = function (e) {
       console.log(n);
       console.log(array[n])
    }
}

赞 +0

添加回复

伊谢尔伦2017-04-10 16:26:31 1楼

循环+闭包
事件代理

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>quick-start</title>
    <style>
    </style>
    <script>
        window.onload = function(){
            var body = document.getElementsByTagName('body')[0];
            var btn = document.getElementsByTagName('button');
            var array = ['one','two','three','four','five'];
            
            //2.事件代理机制
            /*
            body.addEventListener('click',function(event){
                var index=0;
                if(event.target.tagName.toLowerCase()==='button'){
                    index=Array.prototype.indexOf.call(btn,event.target);
                    console.log(array[index]);
                }
            },false);
            */
            
            //1. 闭包+循环
            for(var num = 0;num<btn.length;num++){
                (function(element,data){
                    element.onclick = function(){
                        console.log(data);
                    }
                }(btn[num],array[num]));

            }

        }
    </script>
</head>
<body>
    <button>one</button>
    <button>two</button>
    <button>three</button>
    <button>four</button>
    <button>five</button>
</body>

</html>

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>