Question

I am playing around with jsplumb, and I am using it to draw lines between div elements. My div elements serve as destination tags which are positioned on top of a background image. Ultimately, I am trying to form a flight routes map.

For example, when a user presses LONDON LUTON on the map - <div id="luton"> it will toggle class selected on the element and show all destinations from LONDON LUTON, with lines connecting div elements. When the user presses <button class="route-map reset">, it will reset all the div elements within route-map element, disable jsPlumb connections, and toggle the selected class on the selected element.

How can I find elements which currently have the selected class assigned to them, and toggle them off?

$("#luton").on('click', function() {
    $(this).hide();
    $(this).toggleClass('selected');
    $("#rotterdam").show();

$(".route-map.reset").on('click', function() {
    $('div.route-map').children().show();
    $('div.route-map > div').toggleClass('selected');
    jsPlumb.detachEveryConnection();
});
Was it helpful?

Solution

This would remove the class selected from all elements that have that class currently assigned to them.

$(".selected").removeClass("selected");
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top