mercredi 16 août 2023

Create Multi Check box filter for html with jquery

i have multiple articles shown in a div the function will hide all items first i go in each div item in the items and see if its classlist contains the filter to show

the code:

div class="filter">
    <h1>Select products</h1> 
        <div class="checkbox"> <label><input type="checkbox" rel="" onchange="change();" checked="checked" />ALL</label> </div>
        <div class="checkbox"> <label><input type="checkbox" rel="TABLET" onchange="change();" />TABLET</label> </div>
        <div class="checkbox"> <label><input type="checkbox" rel="MEDICAL" onchange="change();" />MEDICAL</label> </div>
        <div class="checkbox">  <label><input type="checkbox" rel="TISANE NATUREL" onchange="change();" />TISANE NATUREL</label> </div>
         </div>

<div id="items">
 <div class="column #MEDICAL# #TABLET#">
        <div class="content">
          <h4>XLS MEDICAL - COMPRIME [FAT REDUCER] {120}</h4>
            <p style="color:blue">Product Ref.: 4384145</p>
            <p style="color:blue">Product Barcode: 5400951001098</p>
        </div>
    </div>

    <div class="column #MEDICAL# #TABLET#">
        <div class="content">
            <h4>XLS MEDICAL - COMPRIME [MAX STRENGTH] {120}</h4>
            <p style="color:blue">Product Ref.: 3214897</p>
            <p style="color:blue">Product Barcode: 5414963013147</p>
         </div>
    </div>

    <div class="column #TISANE NATUREL#">
        <div class="content">
            <h4>XLS MEDICAL - TISANE [FROID] {20}</h4>
            <p style="color:blue">Product Ref.: 3045382</p>
            <p style="color:blue">Product Barcode: 5412141225559</p>
        </div>
    </div>
</div>


<script>
          function change() {
              let results = Array.from(document.querySelectorAll('.row > div')),
                  selectedFilters = document.querySelectorAll('.filter input.models:checked');

              results.forEach(function (result) { result.style.display = 'none'; });

              selectedFilters.forEach(function (filter) { 
                  results.forEach(function (item) {
                      if (Array.inArray(item.classList, filter.getAttribute('rel')) != -1) { item.style.display = 'block'; };
                  });
              });
    }

    change();
</script>

i have tried to change the results to ".row > content" it hides all the item without showing any

my code is not working, thanks for help.




Aucun commentaire:

Enregistrer un commentaire