每当我点击 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()
- 实际上也是一个静态方法调用。
每次您希望将其包裹在一个元素周围时,您都需要创建一个类型为 F
的new
对象。只有这样,您才能为每个元素获得一个单独的 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/