javascript - 如何修复我的 jQuery 代码中的闭包错误

标签 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"></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>

最佳答案

您已在类中使用该名称引用您的对象类 F

您的行 F.that = this 因此有效地创建了在其他 OO 语言中被视为类的“静态成员”的内容,因此 #btn2#btn1 最终共享了同一个 that 成员。

此外,您的点击处理程序正在尝试调用 F.method() - 实际上也是一个静态方法调用。

每次您希望将其包裹在一个元素周围时,您都需要创建一个类型为 Fnew 对象。只有这样,您才能为每个元素获得一个单独的 this

我建议使用现成的 jQuery 插件模型,例如 http://jqueryboilerplate.com/而不是试图发明你自己的。请参阅该代码的摘录:

$.fn[ pluginName ] = function ( options ) {
    return this.each(function() {
        if ( !$.data( this, "plugin_" + pluginName ) ) {
            $.data( this, "plugin_" + pluginName, new Plugin( this, options ) );
        }
    });
};

注意它是如何使用 new Plugin 创建插件实例,然后使用 $.data 将其存储在元素上,但仅在第一次调用插件时针对每个元素。

关于javascript - 如何修复我的 jQuery 代码中的闭包错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20757094/

相关文章:

javascript - 在另一个 HTML 页面中创建 HTML 页面的 Webview 预览

javascript - 网格 JavaScript 中的随机框

javascript - 将 'error' 消息添加到 Isotope.JS 搜索过滤器?

javascript - 复选框组计算值

javascript - jQuery:单击函数绑定(bind)在带有闭包修复的 for 循环中

javascript - Google Analytics 同时向不同域的多个配置文件报告

javascript - 根据另一个包含 javascript 键的数组过滤对象数组

javascript - 如何使用 Lodash 比较和查找两个复杂对象的差异?

javascript 闭包与类实例

javascript - 隔离外部Javascript,防止污染?