无法将图像设置为 jsPlumb 端点答案

【问题标题】：Can't set image to jsPlumb endpoint无法将图像设置为 jsPlumb 端点
【发布时间】：2017-11-17 07:58:32
【问题描述】：

我在我的项目中使用 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 中，按“添加新链接”并尝试附加分离连接。你会看到端点没有改变。

【问题讨论】：

标签： jquery jquery-ui jsplumb

【解决方案1】：

我在 jsPlumb google group 中找到了解决方案。我设置了端点Blank 而不是Image，添加了cssClass: 'myClass' 属性，然后设置了.myClass { background: url(...) } 的样式。这就是我想要的，因为连接的端点会获得额外的类'jsplumb-endpoint-connected'，我可以将另一个图像设置为这个类的背景。

【讨论】：