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

误解闭包的典型例子。了解如何解决此问题here。

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“的参数，而不是选项的预定义变量。

我不擅长解释内容，但至于将函数传递给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);
})();

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

4 个答案: