Reset fill Attribut von SVG-Pfad, der über eine zusätzliche Klasse dynamisch gestylt wurde

stimmen
0

Ich habe eine SVG-Karte der Vereinigten Staaten, mit einem Schieber darunter. Der Schieber geht 2000-2018, und jedes Intervall ist ein Jahr. Wenn Sie den Schieberegler nach einem Jahr ziehen, wird eine Klasse zu jedem Zustand angehängt, und die Füllung ändert.

Die Standardklassen sind die Namen der Zustände: .map3Alaska, .map3Alabama usw.

Wenn Sie den Regler verschieben, wird das Jahr als eine separate Klasse angehängt: .map3Alaska.obe2000, .map3Alaska.obe2001 usw. auf einem Gesundheitszustand Dies basiert (in diesem Fall Adipositas) und das Jahr.

Ich habe eine Funktion, die jede weitere Klasse, bevor eine neue entfernt wird hinzugefügt, so dass Sie nie etwas .map3Alaska.obe2000.obe2001 sehen

Ich würde eine Reset-Taste wie das die Füllung auf die Standardfarbe zurück (weiß). Ich habe versucht, dies durch eine Funktion zu tun, die Sätze CSS fügt hinzu: Füllung „weiß“. Dies macht die Füllung auf weiß zurück, aber dann, wenn Sie den Regler wieder bewegen, wird die Füllung Satz durch die beigefügten Klasse negiert durch die CSS-Regel durch die Reset-Funktion angewendet:

Geben

Gibt es eine Möglichkeit, das Fill-Attribut von allen potentiellen Klassen zu entfernen? Die folgenden Klassen-Formate verwendet werden (xx steht für das Jahr, von 2000 bis 2018):

  • Obe20xx (Adipositas)
  • Dep20xx (Depression)
  • Ast20xx (Asthma)
  • Kid20xx (Nierenerkrankung)
  • ha20xx (Herzinfarkt)

Ich habe versucht, Wildcard-Klassen-Selektoren zu verwenden, aber das hat nicht funktioniert:

    $([class^=dep], [class^=obe], [class^=ha], [class^=ast], [class^=kid], [class^=map3])
                    .removeAttr(
                        'fill'
                    )
Veröffentlicht am 02/12/2019 um 23:59
quelle vom benutzer
In anderen Sprachen...                            


1 antworten

Reset fill Attribut von SVG-Pfad, der über eine zusätzliche Klasse dynamisch gestylt wurde

stimmen
0

Ich habe eine SVG-Karte der Vereinigten Staaten, mit einem Schieber darunter. Der Schieber geht 2000-2018, und jedes Intervall ist ein Jahr. Wenn Sie den Schieberegler nach einem Jahr ziehen, wird eine Klasse zu jedem Zustand angehängt, und die Füllung ändert.

Die Standardklassen sind die Namen der Zustände: .map3Alaska, .map3Alabama usw.

Wenn Sie den Regler verschieben, wird das Jahr als eine separate Klasse angehängt: .map3Alaska.obe2000, .map3Alaska.obe2001 usw. auf einem Gesundheitszustand Dies basiert (in diesem Fall Adipositas) und das Jahr.

Ich habe eine Funktion, die jede weitere Klasse, bevor eine neue entfernt wird hinzugefügt, so dass Sie nie etwas .map3Alaska.obe2000.obe2001 sehen

Ich würde eine Reset-Taste wie das die Füllung auf die Standardfarbe zurück (weiß). Ich habe versucht, dies durch eine Funktion zu tun, die Sätze CSS fügt hinzu: Füllung „weiß“. Dies macht die Füllung auf weiß zurück, aber dann, wenn Sie den Regler wieder bewegen, wird die Füllung Satz durch die beigefügten Klasse negiert durch die CSS-Regel durch die Reset-Funktion angewendet:

Geben Sie hier image description

Gibt es eine Möglichkeit, das Fill-Attribut von allen potentiellen Klassen zu entfernen? Die folgenden Klassen-Formate verwendet werden (xx steht für das Jahr, von 2000 bis 2018):

  • Obe20xx (Adipositas)
  • Dep20xx (Depression)
  • Ast20xx (Asthma)
  • Kid20xx (Nierenerkrankung)
  • ha20xx (Herzinfarkt)

Ich habe versucht, Wildcard-Klassen-Selektoren zu verwenden, aber das hat nicht funktioniert:

    $("[class^=dep], [class^=obe], [class^=ha], [class^=ast], [class^=kid], [class^=map3]")
                    .removeAttr(
                        'fill'
                    )
Beantwortet am 02/12/2019 um 23:59
quelle vom benutzer

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more