Javascript 如何修复jQuery代码中的闭包错误_Javascript_Jquery_Closures

Javascript 如何修复jQuery代码中的闭包错误

javascript jquery

Javascript 如何修复jQuery代码中的闭包错误,javascript,jquery,closures,Javascript,Jquery,Closures,每当我单击btn1或btn2时，页面总是发出警报“btn2”。似乎是这个问题导致了“点击”关闭。但我不知道如何修复它提前谢谢 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>untitled</title> <script src="http://code.jquery.com/jquery-1.10.2.min.js"&

每当我单击btn1或btn2时，页面总是发出警报“btn2”。似乎是这个问题导致了“点击”关闭。但我不知道如何修复它

提前谢谢

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>untitled</title>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script>
        (function(){
            $.fn.test =  function(){
                F.init.apply(this,arguments)
            };
            var F ={
                that:null,
                init:function(){
                    F.that = this;
                    $(F.that).click(function(e) {
                        F.method();
                    });
                },
                method:function(){
                    var text =$(F.that).html();
                    alert(text);
                }
            }
        })();
        $(function(){
            $("#btn1").test(); //alert btn2---bug
            $("#btn2").test(); //alert btn2
        });
    </script>
</head>
<body>
    <button id="btn1">btn1</button>
    <button id="btn2">btn2</button>
</body>
</html>


无标题
（功能（）{
$.fn.test=函数（）{
F.init.apply（这个，参数）
};
变量F={
那,零,，
init:function（）{
F.那=这个；
$（F.that）。单击（函数（e）{
F.方法（）；
});
},
方法：函数（）{
var text=$（F.that.html（）；
警报（文本）；
}
}
})();
$（函数（）{
$（“#btn1”）.test（）；//警报btn2---bug
$（“#btn2”）.test（）；//警报btn2
});
btn1
btn2

您已经从类中通过该名称引用了对象类

因此，您的行

F.that=this

有效地创建了在其他OO语言中被视为类的“静态成员”的内容，因此

#btn2

和

#btn1

最终都共享了该成员的


此外，您的单击处理程序正在尝试调用F.method（）
——实际上也是一个静态方法调用
每次希望将F
类型的new
对象环绕在元素周围时，都需要创建一个对象。只有这样，您才能为每个元素获得一个单独的this

我建议使用现成的jQuery插件模型，例如，而不是尝试发明自己的。请参阅该代码的摘录：
$.fn[ pluginName ] = function ( options ) {
    return this.each(function() {
        if ( !$.data( this, "plugin_" + pluginName ) ) {
            $.data( this, "plugin_" + pluginName, new Plugin( this, options ) );
        }
    });
};

请注意它是如何使用new Plugin
创建插件实例的，然后使用$将其存储在元素上。data
，但只有在第一次针对每个元素调用插件时。
1）F是一个静态对象
2） 这也是静态的
3） 所以
行将“this”设置为F.that。
4） 你第一次打电话
$("#btn1").test(); 

$("#btn2").test();

那么F等于美元//这将等于美元（“#btn1”）
5） 下次你打电话的时候
$("#btn1").test(); 

$("#btn2").test();

那么F等于美元//这将等于美元（“#btn2”）
6） 最后是F，您正在设置$（“#btn2”）
7） 因此$（F.that.html（）；本质上是$（$（“#btn2”）.html（）），它与$（“#btn2”）.html（）进一步相同
8） 因此警报显示“btn2”