将带有参数的函数作为参数传递给jQuery的回调

Question

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

  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);

我收到了我已评论的错误。 有什么想法我做错了吗？

谢谢 ！

Answer 1

误解关闭的经典示例。 在此处了解如何解决此问题 。

Answer 2

这个问题确实是一个范围界定的问题。 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);
}

Answer 3

试试这个，它遍历添加<li>元素的数组。 要调用的函数被分配给本地“ func”变量，然后在点击处理函数中使用。

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

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

Answer 4

从“（function menuMaker（options）{”中删除“ options”参数。options变量已经在函数外部设置。通过将其添加为参数，该函数将查找“ options”的参数，而不是选项。

我不太擅长于说明内容，但是对于将函数传递给for循环并传递给每个单独的click事件，请按如下所示创建一个空函数，这样它就不会引用最后使用的值。

经测试！ 作品！

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);
})();