记录错误:JS循环给按钮添加事件时总是执行最后一个 答:

今天再做需求 运行后，奇怪的发现无论点击哪个标签，都是最后一个

 

下面做下分析：因为在for循环里面指定给hover的事件处理程序，也就是hover事件赋值是在for循环执行完成后（用户单击链接时）才被调用的。而调用时，需要对变量sss求值，解析程序首先会在事件处理程序内部查找，但sss没有定义。然后，又到方法外部去查找，此时有定义，但sss的值是4（只有sss大于4才会停止执行for循环）。因此，就会取得该值——这正是闭包（匿名函数）要使用其外部作用域中变量的结果。而且，这也是由于匿名函数本身无法传递参数（故而无法维护自己的作用域）造成的。

 

那现在原因是知道了，如何来避免这种情况呢？

既然已经知道函数调用外部变量的时候就构成了一个闭包，里面的变量会受到别的地方的影响，那么我们

现在要做的就是，构建一个只有自己本身才可访问的闭包，保存只供本身使用的变量

构建一个闭包很简单，代码如下：
        var ss=$("#formContext .ddComponent[data-component] label").next("div");
        for(var sss=0;sss<ss.length;sss++){
            (function(sss){
                var dat=$("#formContext .ddComponent[data-component] label").next("div").eq(sss).parent().attr("data-component");
                // 添加鼠标悬停事件
                $("#formContext .ddComponent[data-component='" + dat + "'] label").next("div").hover(
                        function() {
                            $("[data-component='" + dat+ "'] .clearfix").next("div").show();
                        },
                        function() {
                            $("[data-component='" + dat+ "'] .clearfix").next("div").hide();
                });
           })(sss);
        }