Javascript 使用jquery函数逐行连接两个div

我有两组测验。
第一组是正确的，但第二组没有显示两点之间的线

用户单击左侧的点，然后单击右侧的点，然后JavaScript创建一条从第一个元素到第二个元素的“画布”线。 （我为我的英语道歉，这是我的第二语言）

（函数（$）{
$.fn.connect=函数（参数）{
var_画布；
var_ctx；
var _lines=new Array（）；//此数组将存储所有行（选项）
var _me=这个；
var _parent=param | | document；
var _lengthline=$（_parent+'.group1.node'）.length；
var _selectFirst=null；
//初始化画布对象
_画布=$（''）
.attr（'width'，$（\u me）.width（））
.attr（'height'，$（\u me）.height（））
.css（‘位置’、‘绝对’）；
$（_parent）.prepend（_canvas）；
//$（\u canvas）.insertBefore（\u parent）；
this.drawLine=函数（选项）{
//它将把线推到阵列上。
_行。推送（选项）；
这个.connect（选项）；
};
this.drawAllLine=函数（选项）{
/*必填字段------------------
左选择器='.class'，
数据_属性='数据权限'，
*/
if（option.left_selector！=''&&typeof option.left_selector！=='undefined'&&&$（option.left_selector）。长度>0）{
$（选项。左选择器）。每个（函数（索引）{
var option2=新对象（）；
$.extend（选项2，选项）；
option2.left_node=$（this.attr（'id'）；
option2.right\u节点=$（this.data）（option.data\u属性）；
if（option2.right\u节点！=''&&typeof option2.right\u节点！=='未定义'）{
_me.抽绳（选项2）；
}
});
}
};
//此功能用于用虚线连接两个不同的div。
this.connect=函数（选项）{
_ctx=_canvas[0]。getContext（'2d'）；
//
_ctx.beginPath（）；
试一试{
色变；
var_dash；
var _left=new Object（）；//这将存储_left元素偏移量
var _right=new Object（）；//这将存储_right元素偏移量
var _error=（option.error='show'）| | false；
/*
选项={
左_节点-按ID显示的左元素-必填项
右\u节点-右元素ID-必需
状态-接受、拒绝、修改，（无）-可选
样式-（虚线）、实线、虚线-可选
水平间隙-（0），距原点的水平间隙
错误-显示，（隐藏）-是否显示错误
宽度-（2）-行的宽度
}
*/
如果（option.left_节点！=''&&typeof option.left_节点！=''未定义'&&option.right_节点！=''&&typeof option.right_节点！=''未定义'&&&&$（option.left_节点）。长度>0&$（option.right_节点）。长度>0）{
//决定线条的颜色
开关（选项状态）{
“受理”案件：
_颜色='#0969a2'；
打破
“驳回”案件：
_颜色=#e7005d'；
打破
案例“修改”：
_颜色='#bfb230'；
打破
案例“无”：
_颜色=灰色；
打破
违约：
_颜色=灰色；
打破
}
//决定线条的样式。虚线还是实线
开关（option.style）{
案例“虚线”：
_破折号=[4,2]；
打破
案例“可靠”：
_破折号=[0,0]；
打破
“虚线”案例：
_破折号=[4,2]；
打破
违约：
_破折号=[4,2]；
打破
}
/*
log（$（option.left_节点））；
$（option.left_节点）
$（option.right\u node）.data（'connect'，true）；
*/
//若left_节点实际上是右侧的，下面的代码将切换元素。
$（option.right\u节点）。每个（函数（索引、值）{
_左_节点=$（option.left_节点）；
_右_节点=$（值）；
_left_node.attr（'data-connect'，true）；
_右_node.attr（'data-connect'，true）；
if（_left_node.offset（）.left>=_right_node.offset（）.left）{
_tmp=\u左\u节点
_左\u节点=\u右\u节点
_右_节点=_tmp；
}
//得到左点和右点
_left.x=_left_node.offset（）.left+_left_node.outerWidth（）；
_left.y=_left_node.offset（）.top+（_left_node.outerHeight（）/2）；
_right.x=\u right\u node.offset（）.left；
_right.y=_right_node.offset（）.top+（_right_node.outerHeight（）/2）；
//创建一个组
//var g=_canvas.group（{strokeWidth:2，strokeDashArray:_dash}）；
//划线
var | u gap=option.horizantal|u gap | 0；
_ctx.moveTo（_left.x，_left.y）；
如果（_差距！=0）{
_ctx.lineTo（_left.x+_gap，_left.y）；
_ctx.lineTo（_right.x-_gap，_right.y）；
}
_ctx.lineTo（_right.x，_right.y）；
如果（！\u ctx.setLineDash）{
_ctx.setLineDash=函数（）{}
}否则{
_ctx.setLineDash（_-dash）；
}
_ctx.lineWidth=option.width | | 2；
_ctx.strokeStyle=\u颜色；
_ctx.stroke（）；
});
//option.resize=option.resize | | false；
}否则{
如果（_error）警报（“必填字段缺失或不正确”）；
}
}捕捉（错误）{
如果（_error）警报（“必填字段缺失或不正确”）；
}
//console.log（_canvas）；
};
//当屏幕调整大小时，它将重新绘制所有行
$（窗口）。调整大小（函数（）{
console.log（_me）；
_我。重画线（）；
});
$（_parent+'.group1.node span'）。单击（函数