私のプロジェクトでjsPlumbライブラリを使用していて、接続されていればエンドポイント画像を変更する機能があります。私はページが読み込まれ、すべて正常に動作しますが、接続イベントで呼び出すと何も起こりません。jsPlumbエンドポイントに画像を設定できません
function changeEndpointImage(){
var elem = $('.tableBody'); //These are my connectable elements
for(var i=0;i<elem.length;i++)
{
var eps=jsPlumb.getEndpoints($(elem[i])); //Getting endpoints for each of the connectable elements
for(var j=0;j<eps.length;j++)
{
if(eps[j].connections.length!=0) //Checking if any of them have connections
eps[j].setImage("images/styled_radiobutton.png"); //Setting another image
}
}
}
jsPlumb.bind("connection", function(connection) {
changeEndpointImage();
//I have also tried this method commented below, but nothing.
//connection.sourceEndpoint.setImage("images/styled_radiobutton.png");
//connection.targetEndpoint.setImage("images/styled_radiobutton.png");
});
私も、接続が切り離された場合は、最初の外観に戻ったエンドポイントの画像を変更しようとしているが、この場合には、唯一のソースエンドポイントが変更されますが、ターゲットは同じまま:ここに私のコードです
jsPlumb.bind("connectionDetached", function(connection) {
connection.targetEndpoint.setImage("images/rsz_styled_radiobutton.png");
connection.sourceEndpoint.setImage("images/rsz_styled_radiobutton.png");
});
この問題を解決するにはどうすればよいですか?
編集:ここにjsfiddleです:
https://jsfiddle.net/vaxobasilidze/cg3hkde7/
ドラッグしていくつかの項目は、右のdiv、押して「新しいリンクを追加」との接続を切り離す添付しようとします。エンドポイントが変更されないことがわかります。