Локальные переменные в 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); 
}); 
}; 

Что происходит каждый элемент wihin sourceNodes что кликали принимают значения в 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)); 
};