Sprawdzanie czy posiada klasę (nodeListy)

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:

1. Masz listę elementów <path>.
2. Z każdym elementem <path> jest powiązana pewna liczba elementów <div> (dwa? trzy?).
3. Na początku wszystkie elementy <div> są ukryte.
4. Po kliknięciu na dany element <path> pokazują się wszystkie powiązane z nim elementy <div>.
5. 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:

1. Masz listę elementów <path>.
2. Z każdym elementem <path> jest powiązana pewna liczba elementów <div> (dwa? trzy?).
3. Na początku wszystkie elementy <div> są ukryte.
4. Po kliknięciu na dany element <path> pokazują się wszystkie powiązane z nim elementy <div>.
5. 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:

1. 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 zdarzenie load.
2. 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 numerze 1 w kodzie).

Wydaje się działać tak, jak to opisałem wyżej.