问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

for循环里变量作用域

头像
decrepted
    1113
    for(var i in data){
$('#test'+i).on('change',function(){
        console.log(i);
    })
}

    每个元素触发事件都会显示最后一个data里的i，数组就是data.length-1
    感觉是闭包相关的问题，请问该如何修改
    PS：let的写法我知道 但是浏览器不兼容没法用

    闭包javascript
    阅读 5.8k
    8 个回答
    得票最新
    头像
    xiaopengji
      6411719

      你可以试一试看看可以解决你的问题；
      for(var i in data){
      (function(i){
      $('#test'+i).on('change',function(){

          console.log(i);
})
})(i);

      }

      头像
      Pandorym
        34617
        for (var i in data) {
    (function (i) {
        $('#test' + i).on('change', function () {
            console.log(i);
        })
    })(i);
}
        头像
        某熊猫桑
          16.1k61547

          我来开个脑洞：既然是注册事件监听，那有没有可能把这个值当自定义数据传进去？

          例如：

          for(var i in data){
    $('#test'+i).on('change', {value:i}, function(e){
        console.log(e.data.value);
    });
}
          头像
          我是一个前端
            1.6k1213

            百度闭包！google闭包

            头像
            vicco
              39317

              你可以这样理解:

              var _bindToClick = function(idx){
     $(".demo" + idx).on("click",function(){
       alert( idx );
     })
}

for(var i = 0; i < dom.length; i++ ){
  _bindToClick(i);
}
              头像
              Vinci
                1971717

                for循环注册事件不太好，性能太差，通用性也差，还是委托吧

                头像
                波罗丁的菠萝
                  8863625

                  这跟js中变量的作用域有关，js并不以{}为作用域，而是以function为作用域的，你这个i输出的都是data的长度，
                  可以使用闭包来解决，或者使用let来代替var

                  头像
                  蛋白
                    9628

                    用一个立即调用函数保存作用域,当一个函数嵌套另一个函数,函数定义时的作用域链到函数执行时依然有效.

                    <body>
    <div>
        <div id="test1">test1</div>
        <div id="test2">test2</div>
        <div id="test3">test3</div>
    </div>
    <script src="jquery.js"></script>
    <script>
        $(function() {
            var data = [1, 2, 3];

            for (var i = 0; i < data.length; i++) {
                var e = data[i];
                (function(e) {
                    $('#test' + e).on('click', function() {
                        console.log(e);
                    });
                }(e));
                /* $('#test' + i).on('click', function() {
                    console.log(i);
                }); */
            }
        });
    </script>
</body>
                    撰写回答
                    你尚未登录，登录后可以
                    • 和开发者交流问题的细节
                    • 关注并接收问题和回答的更新提醒
                    • 参与内容的编辑和改进，让解决方法与时俱进
                    推荐问题