change edges line color when the connected node clicked in cytoscape.js

Question

could someone give an example of Cytoscape.js about a node that when it clicked, the neighbors edges changed its styles.

this code doesn't work:

cy.$('node:selected').neighborhood('edge').style({
  'line-color': 'black'
});
cy.$('node:selected').connectedEdges().style({
  'line-color': 'black'
});

Answer 1

cy.$('node').on('grab', function (e) {
    var ele = e.target;
    ele.connectedEdges().style({ 'line-color': 'red' });
});


cy.$('node').on('free', function (e) {
    var ele = e.target;
    ele.connectedEdges().style({ 'line-color': '#FAFAFA' });
});

Answer 2

You have a race condition by assuming the order of events of tap/click and select.

Use :selected selectors for querying only with select events or use tap with the element passed in the event object.