Witam chcę zrobić coś ala fliter z svg mapy polski. Mam tak nodeListe województw z mapy i nodeListe divów z nazwami województw. Po kliknięciu na dane województwo(na mapie svg) mają się wyświetlać divy z danego województwa.
Wiem, że aby sprawdzić czy daną klasę służy classList.contains("klasa"), ale nie wiem w jaki sposób mogę to połączyć. Nie wiem czy można tak zagnieżdżać forEach'a ?
https://jsfiddle.net/9wxquecv/12/
Raloseq napisał(a):
Po kliknięciu na dane województwo(na mapie svg) mają się wyświetlać divy z danego województwa.
W JSFiddle widzę, że dla każdego województwa masz jeden element <path>
(każdy posiadający klasę map-wojew
). Czym zaś są "divy z danego województwa"?
Silv napisał(a):
Raloseq napisał(a):
Po kliknięciu na dane województwo(na mapie svg) mają się wyświetlać divy z danego województwa.
W JSFiddle widzę, że dla każdego województwa masz jeden element
<path>
(każdy posiadający klasęmap-wojew
). Czym zaś są "divy z danego województwa"?
Mazowieckie1 Mazowieckie2 Lubelskie1 pod svg są
Tak, są; tylko nie rozumiem, jaka jest relacja między nimi a elementami <path>
. Napisałeś divy z danego województwa
, a to brzmi dla mnie tak, jakby każde województwo posiadało relację do jakiegoś elementu <div>
. W JSFiddle widzę tylko 3 elementy <div>
, które nadto odnoszą się tylko do 2 województw. Czy chodzi Ci o to, że po kliknięciu danego województwa powinien zostać stworzony jeden element <div>
(i wyświetlony na dole)?
Dałem akurat trzy divy tak na przykład oczywiście będzie ich więcej. Właśnie chce utworzyć taką relację, że elementowi path np. z województwa mazowieckiego będą odpowiadać divy z klasą mazowieckie tak samo path ma klasę mazowieckie i jakoś to sprawdzić, że jak klikniemy w path z klasą mazowiecki to szuka po wszystkich divach pobranych z document.querySelectorAll. Nie ma ich tworzyć bo one już są tylko ukryte poprzez dodanie klasy hide. Po kliknięciu w path mazowieckie ma zabrać divom z klasa mazowieckie klasę hide i po prostu mają się one wyświetlać. Nie wiem jak mogę to inaczej opisać.
OK; ja to rozumiem tak:
- Masz listę elementów
<path>
. - Z każdym elementem
<path>
jest powiązana pewna liczba elementów<div>
(dwa? trzy?). - Na początku wszystkie elementy
<div>
są ukryte. - Po kliknięciu na dany element
<path>
pokazują się wszystkie powiązane z nim elementy<div>
. - Elementy
<div>
mają być mapowane na elementy<path>
za pomocą klas.
Algorytm do powyższego w "bardziej ustandaryzowanym" pseudokodzie wyglądałby tak:
when path clicked
relatedDivs = divs.findAll(d => d.class == path.class)
relatedDivs.forEach(d => d.show())
Kod JS zaraz przejrzę.
Silv napisał(a):
OK; ja to rozumiem tak:
- Masz listę elementów
<path>
.- Z każdym elementem
<path>
jest powiązana pewna liczba elementów<div>
(dwa? trzy?).- Na początku wszystkie elementy
<div>
są ukryte.- Po kliknięciu na dany element
<path>
pokazują się wszystkie powiązane z nim elementy<div>
.- Elementy
<div>
mają być mapowane na elementy<path>
za pomocą klas.Algorytm do powyższego w "bardziej ustandaryzowanym" pseudokodzie wyglądałby tak:
when path clicked relatedDivs = divs.findAll(d => d.class == path.class) relatedDivs.forEach(d => d.show())
Kod JS zaraz przejrzę.
Docelowo tych divów będzie z 50 ale tak o to mi chodzi.
Przerobiłem trochę kod; tutaj -> https://jsfiddle.net/js0eak7z/3/ Dwie ważne zmiany:
- Usunąłem zdarzenie
DOMContentLoaded
; u siebie będziesz go potrzebować, ale JSFiddle działa tak, że cały JavaScript w zakładce JavaScript jest uruchamiany już w odpowiedzi na wybrane zdarzenie (klikając link nad kodem JS). Obecnie jest to zdarzenieload
. - Określiłem, że klasa, która ma być taka sama dla danego elementu
<path>
oraz powiązanego z nim elementu<div>
, musi być zawsze podana jako druga na liście (indeks o numerze1
w kodzie).
Wydaje się działać tak, jak to opisałem wyżej.