Question

我正在使用jsPlumb连接页面上的div元素，使用以下代码

var sourceDiv = $("#a");
var targetDiv1 = $("#b");
var targetDiv2 = $("#b");

jsPlumb.connect({
    source: sourceDiv, 
    target: targetDiv1,
    anchors: ["BottomLeft", "TopCenter"],
    paintStyle: { strokeStyle: "blue", lineWidth: 5 },
    connector: ["Flowchart", { minStubLength: 40}]
});

jsPlumb.connect({
    source: sourceDiv, 
    target: targetDiv2,
    anchors: ["BottomRight", "TopCenter"],
    paintStyle: { strokeStyle: "blue", lineWidth: 5 },
    connector: ["Flowchart", { minStubLength: 40}]
});

这很好用，但我有很多元素要在页面上连接。

如何更改上面的代码，以便不是单独执行每组连接，而是使用某种包含所有连接（源和目标）设置的数组，然后有一个循环来解析连接（源和目标）在一个循环中像每个？

数据结构的类似内容：

var connections = new Array();
connection[0] = $('#a'), $('#b');
connection[1] = $('#a'), $('#b');
connection[2] = $('#b'), $('#c');
connection[3] = $('#c'), $('#d');

第一个dom元素是源，然后第二个是目标。可能需要扩展它以指定位置。

感激地收到任何想法。

Answer 1

这应该有效：

var connections = new Array();
connections[0] = {src: "#a", tgt:"#b"};
connections[1] = {src: "#a", tgt:"#b"};
connections[2] = {src: "#b", tgt:"#c"};
connections[3] = {src: "#c", tgt:"#d"};
for(var index = 0; index < connections.length; index++) {
    var con = jsPlumb.connect({
        source: $($("html").find(connections[index].src)),
        target: $($("html").find(connections[index].tgt))
    });           
}

使用jsPlumb连接多个dom元素

1 个答案: