Jeg har en SVG kart over USA, med en glidebryter under den. Glideren går 2000-2018, og hvert intervall er et år. Når du drar glidebryteren til et år, er en klasse lagt til hver stat, og fyllet endringer.
Misligholdsklassene er navnene på de statene: .map3Alaska, .map3Alabama, etc.
Når du flytter glidebryteren, blir året legges som en egen klasse: .map3Alaska.obe2000, .map3Alaska.obe2001, etc. Dette er basert på en helsetilstand (i dette tilfellet fedme) og året.
Jeg har en funksjon som fjerner hver ekstra klasse før en ny er lagt til, slik at du aldri se noe lignende .map3Alaska.obe2000.obe2001
Jeg vil gjerne ha en reset knapp som returnerer fyllet til standardfargen (hvit). Jeg prøvde å gjøre dette gjennom en funksjon som legger sett CSS: fyll til hvit. Dette gjør tilbake fyllet til hvit, men hvis du flytter glidebryteren igjen, fyllet sett av vedlagte klasse motvirket av CSS regelen anvendes av tilbakestillingsfunksjonen:
Er det en måte å fjerne fyll attributtet fra alle mulige klasser? Følgende klasser formater brukes (xx representerer år, fra 2000 til 2018):
- Obe20xx (fedme)
- Dep20xx (depresjon)
- Ast20xx (astma)
- Kid20xx (nyresykdom)
- ha20xx (hjerteattakk)
Jeg prøvde å bruke joker klasse velgere, men dette fungerte ikke:
$([class^=dep], [class^=obe], [class^=ha], [class^=ast], [class^=kid], [class^=map3])
.removeAttr(
'fill'
)
