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();
});
This would remove the class selected
from all elements that have that class currently assigned to them.
$(".selected").removeClass("selected");