Eu tenho um mapa SVG dos Estados Unidos, com um controle deslizante abaixo dela. O controle deslizante vai 2000-2018, e cada intervalo é de um ano. Quando você arrastar o controle deslizante para um ano, uma classe é anexado a cada estado, e o preenchimento muda.
As classes padrão são os nomes dos estados: .map3Alaska, .map3Alabama, etc.
Quando você move o cursor, o ano fica anexado como uma classe separada: .map3Alaska.obe2000, .map3Alaska.obe2001, etc. Isto é baseado em uma condição de saúde (neste caso, obesidade) e do ano.
Eu tenho uma função que remove cada classe adicional antes de um novo é adicionado, assim que você nunca ver qualquer coisa como .map3Alaska.obe2000.obe2001
Eu gostaria de um botão de reset que retorna o preenchimento para a cor padrão (branco). Eu tentei fazer isso através de uma função que adiciona conjuntos CSS: preenchimento para branco. Isso faz retornar o preenchimento de branco, mas, em seguida, se você mover o cursor novamente, o conjunto de enchimento pela classe anexada é negada pela regra CSS aplicado pela função de reset:
Existe uma maneira de remover o atributo de preenchimento de todas as classes potenciais? Os seguintes formatos de classes são usadas (xx representa o ano, de 2000 a 2018):
- Obe20xx (obesidade)
- Dep20xx (depressão)
- Ast20xx (asma)
- Kid20xx (doença renal)
- ha20xx (ataque cardíaco)
Eu tentei usar seletores de classe curinga, mas isso não funcionou:
$([class^=dep], [class^=obe], [class^=ha], [class^=ast], [class^=kid], [class^=map3])
.removeAttr(
'fill'
)
