0

我是使用 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);
 });
};

发生的情况是单击 sourceNodes 中的每个项目都采用 InputFiles3 中的值，这是通过 sourceClass.bind 绑定的最后一个条目。对我在这里缺少什么概念以及如何使循环中的每个对象独立的任何见解？

4

2 回答 2

2

当点击发生时，sourceNode设置为列表中的最后一项。一种解决方案是使用立即调用的函数表达式创建闭包：

for (var m in sourceNodes) {
    (function (sourceNode) {
        ...        
    })(sourceNodes[m]);
};
于 2013-10-01T19:41:11.607 回答
0

使用$.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));
};
于 2013-10-01T19:46:43.617 回答