Reset fill attribute from SVG path which has been dynamically styled via an added class

95
December 03, 2019, at 10:50 PM

I have an SVG map of the United States, with a slider beneath it. The slider goes from 2000 to 2018, and each interval is a year. When you drag the slider to a year, a class is appended to each state, and the fill changes.

The default classes are the names of the states: .map3Alaska, .map3Alabama, etc.

When you move the slider, the year gets appended as a separate class: .map3Alaska.obe2000, .map3Alaska.obe2001, etc. This is based on a health condition (in this case obesity) and the year.

I have a function that removes each additional class before a new one is added, so you never see anything like .map3Alaska.obe2000.obe2001

I would like a reset button that returns the fill to the default color (white). I tried to do this through a function that adds sets CSS: fill to "white". This does return the fill to white, but then if you move the slider again, the fill set by the appended class is negated by the CSS rule applied by the reset function:

Is there a way to remove the fill attribute from all potential classes? The following classes formats are used (xx represents the year, from 2000 through 2018):

  • Obe20xx (obesity)
  • Dep20xx (depression)
  • Ast20xx (asthma)
  • Kid20xx (kidney disease)
  • ha20xx (heart attack)

I tried to use wildcard class selectors, but this didn't work:

$("[class^=dep], [class^=obe], [class^=ha], [class^=ast], [class^=kid], [class^=map3]")
.removeAttr('fill')
READ ALSO
Form redirection to a link

Form redirection to a link

on my website, I have a listing page

99
Calling Jquery focusIn function on elements in modal

Calling Jquery focusIn function on elements in modal

I have a modal that contains several text boxesI am trying to have a javascript function execute by calling the Jquery focusIn() function on the text box in question

144
I'm trying to get the innerHTML of all <h2> tags and set that as their individual IDs but I'm not sure how to go about it

I'm trying to get the innerHTML of all <h2> tags and set that as their individual IDs but I'm not sure how to go about it

Basically I have a bunch of <h2> tags and without going into detail, I can't manually assign them IDsSo I THINK I could use

142
JQuery adding &ldquo;d-none&rdquo; class not reflected when focused on another tab

JQuery adding “d-none” class not reflected when focused on another tab

I am trying to hide on section of my page to show a "loading" spinnerTo do this, I just use jquery to add class "d-none" and remove class "d-none from whichever needs to be hidden/shown

116