问题
I'm using jsPlumb library in my project and I have a function that changes endpoint images if they are connected. I call it when the page loads and everything works fine, but when I call it on connection event, nothing happens. Here is my code:
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");
});
I'm also trying to change endpoint images back to the first look if the connection is detached, but in this case, only the source endpoint gets changed, target remains the same:
jsPlumb.bind("connectionDetached", function(connection) {
connection.targetEndpoint.setImage("images/rsz_styled_radiobutton.png");
connection.sourceEndpoint.setImage("images/rsz_styled_radiobutton.png");
});
What am I missing or how can I fix this problem?
EDIT: Here is jsfiddle:
https://jsfiddle.net/vaxobasilidze/cg3hkde7/
Drag few items to the right div, press "Add new link" and try to attach detach connections. You will see that endpoints don't change.
回答1:
I found a solution to this in jsPlumb google group. I have set endpoint Blank
instead of Image
, added cssClass: 'myClass'
property and then styled .myClass { background: url(...) }
. This does what I wanted, because connected endpoints get additional class 'jsplumb-endpoint-connected'
and I can set another image as a background to this class.
来源:https://stackoverflow.com/questions/47345832/cant-set-image-to-jsplumb-endpoint