JS中批量给元素绑定事件过程使用闭包解决

最新推荐文章于 2022-11-12 01:26:04 发布

原创最新推荐文章于 2022-11-12 01:26:04 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript

原生JavaScript 专栏收录该内容

16 篇文章

订阅专栏

本文探讨了JavaScript中使用闭包和with关键字解决循环变量作用域问题的方法，并提供了具体的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在JS中，你写一个for循环的时候，内部的循环变量I其实是会保存在它运行的函数或类内的，所以你会发现你给元素批量绑定事件的时候，出现i=最后一个循环变量的值，这就很坑爹啊，解决的方案有2钟，

思路就是：把这个循环变量保存起来，不要让它的作用域在整个函数，而是在循环体内

1.使用闭包(如果你不懂闭包，请打开百度：www.baidu.com)

2.使用with关键字，with语法是with( obj ) { //使得可以在此直接访问obj的属性，而不用加obj.XXX }

代码示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <script type="text/javascript" src="jquery-1.7.2.js" ></script>
    <script type="text/javascript" language="javascript">
        $(document).ready(function (){
            function Ev(i){
                this.index = i;

                this.click = function (){
                    alert(this.index );
                }
            }

            for(var k=1; k<4; k++){
                //闭包函数1
//                (function(x){
//                    $("#div" + x).click(function(){
//                        f(x);
//                    });
//                }(k));

                //使用with关键字
                with ({i: k}){
                    $("#div" + i).click(function(){
                        f(i);
                    });
                }
            }


            var f = function (m){
                alert(m);
            }

        });
    </script>
</head>
<body>

</body>
</html>