个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在尝试创建一个插件，用于传递特定事件的处理函数。在下面的简单示例中，我有两个按钮。当我按下按钮 1 时，其标签应更改为“按钮 A”，而当我按下按钮 2 时，其标签应更改为“按钮 B”。
但是，当我按下按钮 1 时，标签变为“按钮 B”。我知道这与循环中的处理函数闭包有关，但我不知道如何修复它。
<body>
<button class="btn1">Button 1</button>
<button class="btn2">Button 2</button>
</body>
这是我的 jquery:
$(function() {
$("body").myplugin( {
helperFunctions : {
funcA : function( obj ) {
$(obj).text( "Button A" );
},
funcB : function( obj ) {
$(obj).text( "Button B" );
}
},
handlers : [
{
on : "click",
selector : ".btn1",
handlerFunc : function( funcs, obj ){
funcs.funcA( obj );
}
},
{
on : "click",
selector : ".btn2",
handlerFunc : function( funcs, obj ){
funcs.funcB( obj );
}
}
]
});
});
(function ($) {
$.fn.extend({
myplugin: function ( settings ) {
var $this = $(this);
function createHandlerFunction( func, obj ){
return func( settings.helperFunctions, obj ) ;
}
for( var handlerIdx in settings.handlers ){
var handler = settings.handlers[ handlerIdx ];
$this.on(
handler.on,
handler.selector,
function() {
return createHandlerFunction( handler.handlerFunc, this ) } );
}
}
});
})(jQuery);
如果示例有点长，请见谅。这是 http://jsfiddle.net/30nL07db/
最佳答案
所以你的代码中的问题是这样的:
for( var handlerIdx in settings.handlers ){
var handler = settings.handlers[ handlerIdx ];
...
您在事件委托(delegate)中使用了 handler 变量，它绑定(bind)到外部变量 handlerIdx，因此当退出 for 循环时，handlerIdx 将是最后一个 ID...
这是一个有 3 个 ID 的反例:see fiddle
查看关于闭包的其他问题:here
关于闭包的教程:here
所以让我们创建一个函数来创建事件委托(delegate)，在循环外部，在循环内部只传递该函数，如下所示:
function createEvent(id) {
$this.on(
settings.handlers[id].on,
settings.handlers[id].selector,
function() {
settings.handlers[id].handlerFunc( settings.helperFunctions, this)
}
);
}
for( var handlerIdx in settings.handlers ){
var handler = settings.handlers[ handlerIdx ];
var s = handler.selector;
createEvent(handlerIdx);
}
关于javascript - 循环中的 Jquery 闭包，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28193861/
25
4
0
以下闭包函数在 javascript 中运行良好。 function generateNextNumber(startNumber) { var current = startNumber;
Swift的闭包（Closures）是一种将功能块和上下文整合并演示在代码中的一种手段。闭包可以捕获并存储其上下文中的变量和常量。与普遍存在于其他语言的匿名函数（如Python的lambda、Java
在本教程中，您将借助示例了解 JavaScript 闭包。 在了解闭包之前，您需要了解两个概念： 嵌套函数 返回函数 JavaScript 嵌套函数 在 JavaScript 中，一个函数也可
在本教程中，您将借助示例了解 JavaScript 闭包。 在了解闭包之前，您需要了解两个概念： 嵌套函数 返回函数 JavaScript 嵌套函数 在 JavaScript 中，一个函数也可
闭包介绍 闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。 要理解闭包，首先必须理解Javascript特殊的变量作用域。 1.全局变量和局部变
这个问题已经有答案了: Methods in ES6 objects: using arrow functions (6 个回答) 已关闭 6 年前。 我已经在 stackoverflow 上到处查找
这个问题已经有答案了: How do JavaScript closures work? (86 个回答) 已关闭 9 年前。 我有一个关于 Javascript 闭包的简单问题: 给出了以下函数:
所以我有以下内容: Object a = data.getA(); Object b = data.getB(); Object c = data.getC(); // and so on 这些对象是
现在已经很晚了，我大脑中道格拉斯·克罗克福德居住的部分已经关闭。我尝试了一些方法，但没有达到预期效果。 我有一个 Canvas ，我在其中画了两条线，然后在计时器上淡出它们，但只有循环中的最后一行淡出
因此，我创建了一个变量 car，然后将其分配给一个函数并添加了参数模型、年份。然后在函数内引用参数创建一个对象。 然后创建“闭包”内部函数 yourCar() 并返回其中的外部函数对象“Propert
我正在 Mozilla 开发者网站上阅读关于关闭的解释，并且有点挣扎。请查看 Mozilla 网站上的以下代码。我有点理解它是如何工作的，但我认为我的评论下面的代码也应该工作。为什么一点击18、20就
这个问题在这里已经有了答案: UnboundLocalError trying to use a variable (supposed to be global) that is (re)assig
以下程序返回“本地”，根据我正在阅读的教程，它旨在演示闭包现象` 我不明白的是，为什么最后为了调用parentfunction，将其分配给变量“child”，然后调用“child”。 为什么只写 pa
我读到闭包末尾的()会立即执行。那么，这两者之间有什么区别。我在一些代码中看到了第一个用法。 谢谢。 for (var a=selectsomeobj(),i=0,len=a.length;i
代码如下 var collection = (function (){ var x = 0; return {
我仍然对 JavaScript 中的闭包概念感到困惑。我明白闭包是内部函数在母函数返回后访问在其母函数中创建的变量的能力。但是我仍然很困惑，如果我们可以在函数内部创建一个变量，为什么我们必须创建内部函
我搜索了很多主题并没有找到答案，或者问题太复杂了。所以没关系。这是我的第一个问题。 这是 SQL SELECT parent.*, ( SELECT COUNT(*) FROM
有 JS 高手可以解释为什么会这样吗: $$={} (function(x){ x.newModule = { func: function(){...} };
在此示例中，我尝试按值传递，但传递的是引用。 for (int i = 0; i new PhoneJobTest(i); t.Start(); } 这可以像这样补救: for (int
从 $.each() 中访问 this.rules 变量的最佳方式是什么？任何关于原因/方式的解释也会有帮助! app.Style = function(node) { this.style
我是一名优秀的程序员,十分优秀！