Javascript 将带有参数的函数作为参数传递给jQuery'；s回调

我在传递函数时遇到了一些困难。 我有以下代码：

  var options = [
        { name: "menu 1", func: function (element) { $(element).css("color", "Red"); } },
        { name: "menu 2", func: function (element) { alert("menu 2"); } },
        { name: "menu 3", func: function (element) { alert("menu 3"); } }
    ];

        // This basically creates a div with ul, and li element for each object in options, 
        // and attaches click event to each li that should fire provided func. 
        (function menuMaker(options) {
            var menuDiv = $("<div id='test' />");
            var menuUl = $("<ul>");
            menuDiv.append(menuUl);

            for (var i = 0; i < options.length; i++) {
                var li = $("<li>" + options[i].name + "</li>");
                // **li.click(function () { options[i].func(menuDiv); });**  
                //>> The line above gives "options[i] is undefined" error. Looks like a scoping issue.

                var userFunc = options[i].func;
                **li.click(function(){ userFunc(menuDiv);});**  
                //>> The line above always fires the last function (alert("menu 3"))

                menuUl.append(li);
            }
            $(document.body).append(menuDiv);
        })(options);

var选项=[
{name:“menu 1”，func:function（element）{$（element）.css（“color”，“Red”）；}，
{name:“菜单2”，func:function（元素）{alert（“菜单2”）；}，
{name:“菜单3”，func:function（元素）{alert（“菜单3”）；}
];
//这基本上为选项中的每个对象创建一个带有ul和li元素的div，
//并将单击事件附加到应激发提供的func的每个li。
（功能菜单生成器（选项）{
var menuDiv=$（“”）；
var menuUl=$（“
”）；
menuDiv.append（menuUl）；
对于（变量i=0；i”+选项[i].name+“”）；
//**li.单击（函数（）{options[i].func（menuDiv）；}）；**
//>>上面的一行给出了“选项[i]未定义”错误。看起来像是范围问题。
var userFunc=options[i].func；
**li.单击（function（）{userFunc（menuDiv）；}）；**
//>>上面的行始终触发最后一个功能（警报（“菜单3”））
menuUl.append（li）；
}
$（document.body）.append（menuDiv）；
})（可选方案）；

我得到了我评论过的那些错误。 知道我做错了什么吗

---

谢谢

误解闭包的经典例子。请参阅如何解决此问题。

误解闭包的经典示例。看看如何解决这个问题。

这个问题确实是一个范围问题。for循环不会创建新的作用域，因此必须在其中创建一个作用域，如下所示：

for (var i=0; i<10; i++) {
    (function(i) {
        // "i" will be local here, and be accessible 
        // form any function defined inside this closure
    })(i);
}

---

for（var i=0；i问题确实是一个范围问题。for循环不会创建新的范围，因此您必须在其中创建一个范围，如下所示：

for (var i=0; i<10; i++) {
    (function(i) {
        // "i" will be local here, and be accessible 
        // form any function defined inside this closure
    })(i);
}

for（var i=0；i试试这个，它在数组上迭代添加
元素。要调用的函数被分配给本地“func”变量，然后在click处理程序函数中使用

$.each(options, function() {
    var func = this.func;

    menuUl.append(
        $('<li>').text(this.name).click(function () {
            func(menuDiv);
        })
    );
});

$。每个（选项，函数（）{
var func=this.func；
menuUl.append(
$（“
”）.text（this.name）。单击（函数（）{
func（menuDiv）；
})
);
});
试试这个，它在数组上迭代添加
元素。要调用的函数被分配给本地“func”变量，然后在click handler函数中使用

$.each(options, function() {
    var func = this.func;

    menuUl.append(
        $('<li>').text(this.name).click(function () {
            func(menuDiv);
        })
    );
});

$。每个（选项，函数（）{
var func=this.func；
menuUl.append(
$（“
”）.text（this.name）。单击（函数（）{
func（menuDiv）；
})
);
});
从函数菜单生成器（选项）中删除“选项”参数{
“。options变量已在函数外部设置。通过将其作为参数添加，函数将查找“options”的参数，而不是预定义的options变量。”

我不擅长解释东西，但是对于通过for循环传递函数并传递给每个单击事件，请创建一个空函数，如下所示，这样它就不会引用最后使用的值

测试！有效

var options = [
    { name: "menu 1", func: function (element) { $(element).css("color", "Red"); } },
    { name: "menu 2", func: function (element) { alert("menu 2"); } },
    { name: "menu 3", func: function (element) { alert("menu 3"); } }
];

(function menuMaker() {
    var menuDiv = $('<div id="test" />'),
        menuUl  = $('<ul />').appendTo(menuDiv);

    for (var i=0; i<options.length; i++) {

        (function() {
            var func = options[i].func;
            $('<li>' + options[i].name + '</li>')
            .click(function(){ func(menuDiv); })
            .appendTo(menuUl);        
        })();

    }

    $(document.body).append(menuDiv);
})();

var选项=[
{name:“menu 1”，func:function（element）{$（element）.css（“color”，“Red”）；}，
{name:“菜单2”，func:function（元素）{alert（“菜单2”）；}，
{name:“菜单3”，func:function（元素）{alert（“菜单3”）；}
];
（函数menuMaker（）{
变量menuDiv=$（''），
menuUl=$（“
”）.appendTo（menuDiv）；
对于（var i=0；i从函数menuMaker（options）中删除“options”参数{
“。options变量已在函数外部设置。通过将其作为参数添加，函数将查找“options”的参数，而不是预定义的options变量。”

我不擅长解释东西，但是对于通过for循环传递函数并传递给每个单击事件，请创建一个空函数，如下所示，这样它就不会引用最后使用的值

测试！有效

var options = [
    { name: "menu 1", func: function (element) { $(element).css("color", "Red"); } },
    { name: "menu 2", func: function (element) { alert("menu 2"); } },
    { name: "menu 3", func: function (element) { alert("menu 3"); } }
];

(function menuMaker() {
    var menuDiv = $('<div id="test" />'),
        menuUl  = $('<ul />').appendTo(menuDiv);

    for (var i=0; i<options.length; i++) {

        (function() {
            var func = options[i].func;
            $('<li>' + options[i].name + '</li>')
            .click(function(){ func(menuDiv); })
            .appendTo(menuUl);        
        })();

    }

    $(document.body).append(menuDiv);
})();

var选项=[
{name:“menu 1”，func:function（element）{$（element）.css（“color”，“Red”）；}，
{name:“菜单2”，func:function（元素）{alert（“菜单2”）；}，
{name:“菜单3”，func:function（元素）{alert（“菜单3”）；}
];
（函数menuMaker（）{
变量menuDiv=$（''），
menuUl=$（“
”）.appendTo（menuDiv）；
对于（var i=0；我更希望使用内部闭包获取i参数的版本。您的解决方案可以工作，因为他设置了中间的“func”变量，但如果使用任何其他“i”，则会中断是添加到事件处理程序中的。我希望使用内部闭包获取I参数的版本。您的解决方案可以工作，因为他设置了中间的“func”变量，但如果其他任何使用“I”的情况下都会中断是添加到事件处理程序中的。很好的引用！不敢相信我到目前为止错过了它。很好的引用！不敢相信我到目前为止错过了它。因此，我最终像这样重写for循环：for（var I=0；I”+options[I].name+“”）；var func=function（uf）{return function（）{uf（menuDiv）；}}//更改作用域li。单击（func（options[i].func））；menuUl.append（li）；}闭包和作用域..Duh！因此我最终重写了for循环如下：for（var i=0；i”+options[i].name+“”）；var func=function（uf）{return function（）{uf（menuDiv）；}}//更改作用域li。单击（func（options[i].func））；menuUl.append（li）；}闭包和作用域..Duh！