gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 12:51:40 24 4
gpt4 key购买 nike

每当我点击 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com