How can I show items when data-filter picked

Question

I need to show divs that has two data (data-filter-color,data-filter-size), The idea is, first you select color and correct divs show up, next you select size and div with color and size selected should show. My question is how can I validate selected options. My code bellow. My issue is that everything is displayed when two data picked. Adding HTML example

// FILTERS
var wybranyKolor = [];
var wybranyRozmiar = [];
var filtryArray = [];

function selectOdmiana() {
    document.querySelectorAll(".produkty").forEach(produkty => {
        var grupaSelect = produkty.querySelectorAll(".grupa");
        grupaSelect.forEach((itemOdmiana) => {
            var odmianaFilter = itemOdmiana.querySelector(".sg_category_product").querySelectorAll(".filter-item");
            odmianaFilter[0].classList.add("sg_active");

            liczFiltry = 0;
            odmianaFilter.forEach((item, i) => {
                liczFiltry++;

                item.addEventListener("click", (f) => {
                    mySelected(itemOdmiana, item);

                    odmianaFilter.forEach((it, i) => {
                        wybranyKolor = [];
                        wybranyRozmiar = [];
                        it.classList.remove("sg_active");
                    })
                    item.classList.add("sg_active");
                    itemOdmiana.querySelectorAll(".odmiana").forEach((odmiana, i) => {
                        odmiana.classList.remove("sg_odmiana_active");
                    });
                    itemOdmiana.querySelector(".odmiana." + item.getAttribute("data-filter").replace(" ", "-")).classList.add("sg_odmiana_active");
                    itemOdmiana.querySelector(".sg_odmiana_active").querySelectorAll(".product-item").forEach((box, i) => {
                        box.style.display = "block";
                    });
                    var resizeEvent = new Event('resize');
                    window.dispatchEvent(resizeEvent);
                })
                newMySelected(itemOdmiana, item);
            });
            selectFilter(itemOdmiana);
        });
    });
}

function mySelected(itemOdmiana, item) {

    if (itemOdmiana.querySelector('.sg_category_color')) {
        var colorGroup = itemOdmiana.querySelector(".sg_category_color").querySelectorAll(".color_group");
        colorGroup.forEach((colorItem, i) => {
            if (colorItem.getAttribute("data-odmiana") == item.getAttribute("data-filter")) {
                colorItem.style.display = "flex";
            } else {
                colorItem.style.display = "none";
            }
        });
    }
    if (itemOdmiana.querySelector('.sg_category_rozmiar')) {
        var rozmiarGroup = itemOdmiana.querySelector(".sg_category_rozmiar").querySelectorAll(".rozmiar_group");
        rozmiarGroup.forEach((rozmiarItem, i) => {
            if (rozmiarItem.getAttribute("data-odmiana") == item.getAttribute("data-filter")) {
                rozmiarItem.style.display = "flex";
            } else {
                rozmiarItem.style.display = "none";
            }
        });
    }
}

function selectFilter(itemOdmiana) {
    if (itemOdmiana.querySelector('.sg_category_color')) {
        var colorFilter = itemOdmiana.querySelector('.sg_category_color').querySelectorAll('.filter-item');
        // KOLORY
        colorFilter.forEach((button) => {
            button.addEventListener("click", (e) => {
                colorFilter.forEach((thisColor) => {
                    thisColor.classList.remove("sg_active");
                    wybranyKolor.pop(filtrColor);
                    // showProducts();
                })
                button.classList.add("sg_active");
                var filtrColor = button.getAttribute('data-filter');
                wybranyKolor.push(filtrColor);
                // sliderFix();
                showProducts(itemOdmiana, filtrColor);
            });
        });
    }
    if (itemOdmiana.querySelector('.sg_category_rozmiar')) {
        var sizeFilter = itemOdmiana.querySelector('.sg_category_rozmiar').querySelectorAll('.filter-item');
        // ROZMIAR
        sizeFilter.forEach((button) => {
            button.addEventListener("click", (e) => {
                sizeFilter.forEach((thisSize) => {
                    thisSize.classList.remove("sg_active");
                    wybranyRozmiar.pop(filtr);
                    // showProducts();
                })
                button.classList.add("sg_active");
                var filtr = button.getAttribute('data-filter');
                wybranyRozmiar.push(filtr);
                // sliderFix();
                showProducts(itemOdmiana, filtr);
            });
        });
    }
}

function showProducts(itemOdmiana) {
    itemOdmiana.querySelectorAll('.glide__slides').forEach(gridDiv => {
        var boxPro = gridDiv.querySelectorAll('.product-item');
        boxPro.forEach((elementDiv) => {

            var kolorCheck = elementDiv.getAttribute("data-filter-color");
            var rozmiarCheck = elementDiv.getAttribute("data-filter-size");

            if (wybranyKolor == kolorCheck) {
                elementDiv.style.display = 'block';
            } else {
                elementDiv.style.display = 'none';
            }



            if (wybranyRozmiar == rozmiarCheck) {
                elementDiv.style.display = 'block';
            } else {
                elementDiv.style.display = 'none';
            }
        });
    });
}

document.addEventListener("DOMContentLoaded", function () {
    selectOdmiana();
});

<div class="sg_filtry_box_div">
  <div class="sg_category_color category_filter">
     <p>Kolor:</p>
      <div class="color_group" data-odmiana="iphone-11">
          <span class="color-filter-item filter-item zloty" data-filter="zloty">zloty</span>
          <span class="color-filter-item filter-item zielony" data-filter="zielony">zielony</span>
          <span class="color-filter-item filter-item srebrny" data-filter="srebrny">srebrny</span>
      </div>
  </div>
  <div class="sg_category_rozmiar category_filter">
     <p>Pojemność:</p>
     <div class="rozmiar_group" data-odmiana="iphone-13-pro">
       <span class="rozmiar-filter-item filter-item 1000" data-filter="1000">1000</span>
       <span class="rozmiar-filter-item filter-item 512" data-filter="512">512</span>
  </div>
</div>

<li class="glide__slide product-item active-product glide__slide--active" data-filter-size="256" data-filter-color="bialy">
  test1
</li>
<li class="glide__slide product-item active-product glide__slide--active" data-filter-size="256" data-filter-color="bialy">
  test2
</li>
<li class="glide__slide product-item active-product glide__slide--active" data-filter-size="256" data-filter-color="bialy">
  test3
</li>

arrays declared ealier, selected options are pushed to arrays — Sztrum, Sep 22 '21 at 21:21
Side note: comparing arrays using `==` might not work as expected. (See [this question.](https://stackoverflow.com/questions/7837456/how-to-compare-arrays-in-javascript)) If the contents of these arrays is always in the same order, and does not contain too many items, you might compare the `.join()`ed strings like so: `ar1.join(',) == ar2.join(',)'`. — Philip, Sep 22 '21 at 21:34

How can I show items when data-filter picked

0 Answers0