將帶有參數的函數作為參數傳遞給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);
})();