javascript / jQuery中的局部變量

Question

我是新手使用jQuery / javascript並且正在使用jsPlumb庫來構建一些動態節點，用戶可以在其中單擊一個形狀並顯示一個新的可拖動節點。

我的問題是我通過for循環構建列表，迭代的最后一個元素被分配給所有其他“點擊”。

這是令人討厭的代碼：

var sourceNodes = {
InputFiles:{
    cssClass:".data_source",
    name:"Input Files1",
    options:[{
        name:"Input Files1",
        connectsFrom:[],
        connectsTo:["IF1.1", "IF1.2"],
    },
    {
        name:"Input Files2",
        connectsFrom:[],
        connectsTo:["IF1.1"],
    }]
},
InputFiles2:{
    cssClass:".data_source",
    name:"Input2.1",
    options:[{
        name:"Input2.1",
        connectsFrom:["Input1"],
        connectsTo:["Input2.1"],
    },
    {
        name:"Input2.2",
        connectsFrom:["Input1"],
        connectsTo:["Input2.2"],
    }]
},
InputFiles3:{
    cssClass:".data_source",
    name:"Input3.1",
    options:[{
        name:"Input3.1",
        connectsFrom:["Input2"],
        connectsTo:["Input3.1"],
    }]
}
};

for( var m in sourceNodes ){
var sourceNode = sourceNodes[m];
var sourceClass = jsPlumb.getSelector(sourceNode.cssClass);
console.log(sourceClass);
sourceClass.bind("click", function(connection){
    var selectorClass = sourceNode.cssClass.concat("_window").substring(1);
    var toFind = "div[id^='".concat(selectorClass,"']");
    var DivIndex = $('#render').find(toFind).length+1;
    var DivName = selectorClass.concat(DivIndex);
    var Div = $('<div>', { id: DivName },
                 { class: selectorClass });
    Div.css({ 
        top: connection.clientY,
        left:  connection.clientX,
    });
    Div.appendTo('#render');
    Div.text(sourceNode.name);
    jsPlumb.draggable($(Div));
    $(Div).addClass(selectorClass);         
    _addEndpoints(DivName, ["BottomCenter"], ["TopCenter"]);
    var selectOption = $('<select>', { id: DivName });
    for( var n=0; n< sourceNode.options.length; n++){
        var option = $('<option>', { value: n,
        connectsTo: sourceNode.options[n].connectsTo,
        connectsFrom: sourceNode.options[n].connectsFrom });
        option.text(sourceNode.options[n].name);
        $(selectOption).append(option);
    }
    $(Div).append(selectOption);
 });
};

所發生的是每個項目被點擊的源節點采用InputFiles3中的值，這是通過sourceClass.bind綁定的最后一個條目。 任何洞察我在這里缺少什么概念，以及如何使循環中的每個對象獨立？

Answer 1

點擊發生時， sourceNode設置為列表中的最后一項。 一種解決方案是使用立即調用的函數表達式創建閉包：

for (var m in sourceNodes) {
    (function (sourceNode) {
        ...        
    })(sourceNodes[m]);
};

Answer 2

使用$ .proxy將當前源節點作為第一個參數傳遞給click處理程序：

for( var m in sourceNodes ){
    var sourceNode = sourceNodes[m];
    var sourceClass = jsPlumb.getSelector(sourceNode.cssClass);
    console.log(sourceClass);

    sourceClass.bind("click", $.proxy(function(currentNode, connection){
        //currentNode is a reference to sourceNode[m] when
        //this click handler was registered
     }, null, sourceNode));
};