Flitrowanie slajdów w rotatorze

Question

Czołem! Witam wszystkich bardzo serdecznie, to mój pierwszy post :)

Godzina już późna a ja pracując nad projektem natrafiłem na problem którego nie umiem rozwiązać, liczę że znajdę tu jakąś pomoc :)

Mam 3 grupy checkboxów oraz slider stworzony za pomocą slick.js Po wybraniu checkboxa filtruje slajdy, wyświetlajac tylko te które mają klasę do value checkboxa. Założenie jest takie że,

1. W danej kategorii wybieram kilka checkboxów i pokazuje mi wszystkie slajdy z wybranymi klasami

2. Jak wybiorę drugą kategorię, to wyświetla mi wszystkie slajdy z 1 kategorii które dodatkowo mają klasę z kategorii 2. Np: .volume1.bmw, .volume2.bmw

Próbuje użyć funkcji .join(), ale kolejne kategorie dopisują się na końcu tablicy, zamiast do każdego elementu.

.volume1,.volume2.blue zamiast .volume1.blue,.volume2.blue 

Jak stworzyć pętlę która doda drugą i trzecia kategorię do każdego elementu, a nie na samym końcu?

Poniżej podsyłąm link do codepen z kodem. Wiem że pytam o podstawowe sprawy (pętla) ale liczę na szybką i sprawna pomoc!

https://codepen.io/plastojs/pen/QejoEQ

Answer 1

Najłatwiej i najprościej pętlą:

for(let i = 0; tablica.length; i++){
   tablica[i] = tablica[i] + "dodatkowaKategoria"
}

Ładniej korzystając z funkcji map

tablica = tablica.map(function(kategoria) { return kategoria + 'dodatkowaKategoria' }); 

I już w ogóle ładniej, korzystając z map + funkcji strzałkowych

tablica = tablica.map(kategoria => kategoria + 'dodatkowaKategoria');

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map