jQuery click-function 传递参数

Question

我想为数组中的所有元素分配 jQuery click-function。但另外，我需要从点击功能中访问数组。来源希望能更清楚：

for (var i=0; i<mybox.myarray.length; i++) {
    mybox.myarray[i].jqelem.click(function(event, mybox) {  
        event.preventDefault();
        doStuffWithParameter(mybox);    
    });
}   

// mybox is a JavaScript object (not jQuery-element!), myarray is an array, jqelem is a jQueryelement ala $("div.myclass");

问题似乎出在function(event, mybox) 上，显然这不起作用，即mybox 在函数中是unknown。我想我“有点”理解为什么它不能以这种方式工作，但是如何实现呢？

PS：我基本上只是为了避免手动为所有数组元素键入它。

Answer 1

只需删除名为mybox 的（无用的）第二个回调函数参数。

如果mybox在外部块的范围内，它也将在内部回调函数的范围内！

如果你需要知道回调中i的适当值，那么你可以做event registration-time binding：

for (var i=0; i<mybox.myarray.length; i++) {
    mybox.myarray[i].jqelem.click({i: i}, function(event) {  
        // use "event.data.i" to access i's value
        var my_i = event.data.i;
    });
}   

映射{i : i} 对应于jQuery .click() 文档中的eventData 参数。

Answer 2

当您的点击处理程序被调用时，第一个参数是事件数据。 jQuery 不会传入第二个参数。

更新：使用闭包获取mybox 对象（注意我删除了第二个参数）

for (var i=0; i<mybox.myarray.length; i++) {
    mybox.myarray[i].jqelem.click(function(event) { 
        event.preventDefault();
        // here's the trick to get the correct i
        (function(item) {
               return function() {
                         doStuffWithParameter(mybox.myarray[item]);
               };
         })(i);

        // you can access any object from parent scope here 
        // (except i, to get to right i, you need another trick), 
        // effectively creating a closure   
        // e.g. doOtherStuff(myarray)
    });
}

在此处阅读有关关闭的更多信息：http://jibbering.com/faq/notes/closures/
在这里：How do JavaScript closures work?

Answer 3

您可以借助 jquery 数据属性

for (var i=0; i<mybox.myarray.length; i++) {
    mybox.myarray[i].jqelem.data("arrayIndex", i).click(function(event) {  
        event.preventDefault();
        doStuffWithParameter(mybox.myarray[$(this).data("arrayIndex")]);    
    });
}