javascript - jquery filter categories with multiple conditions

Question

I am trying to filter a product list by different variants.

I have a list of sizes, then buttons for materials and different color options. Each size will have the class name of the variant which is considered in stock. So on clicking the button the for gold you filter away all the sizes which are not tagged as gold.

What I'm trying to accomplish though is to filter with two conditions. So if you click on gold it filters away everything without a class gold, but then when you click a color option I want to filter within the already selected gold category. My code currently doesn't account for that, if you click on blue for example it shows all available sizes in blue, instead of only the blue sizes with material gold.

I also am thinking that this should work in any direction as well if you click a size it should filter the available colors and material.

This is my html:

<div class="grid grid-cols-4">
    <button id="five" class="size silver gold blue">5</button>
    <button id="six" class="size gold red">6</button>
    <button id="seven" class="size silver red blue">7</button>
    <button id="eight" class="size silver gold red">8</button>
    <button id="nine" class="size gold red">9</button>
    <button id="ten" class="size silver blue">10</button>
    <button id="eleven" class="size gold red">11</button>
    <button id="twelve" class="size silver red">12</button>
</div>
<div>
    <button id="silver">silver</button>
    <button id=gold>gold</button>
</div>      
<div>
    <button id="tsavorite">red</button>
    <button id="emerald">blue</button>
</div>

and jquery:

$( document ).ready(function() {
    $('#gold').on("click", function() {
          $('.size').hide();
          $('.gold').show();
     });
     $('#silver').on("click", function() {
          $('.size').hide();
          $('.silver').show();
     });

    $('#blue').on("click", function() {
          $('.size').hide();
          $('.blue').show();
     });
     $('#red').on("click", function() {
          $('.size').hide();
          $('.red').show();
     });
});

question from:https://stackoverflow.com/questions/65862034/jquery-filter-categories-with-multiple-conditions

Answer 1

I have created the dynamic way for this. Please check the below code for this.

$( document ).ready(function() {
    $('.filter-button').on("click", function() {
         var data_type = $(this).attr('data-type');
         var data_value = $(this).attr('data-value');
         $("[data-type="+data_type+"]").removeClass('active');
         $(this).addClass('active');
         $('.size').hide().removeClass('active');
         var classesArray = [];
         $('button.active').each(function(){
            var selected_filters = $(this).attr('data-value');
            classesArray.push(selected_filters);
         })
         classes = classesArray.join('.');
         $('.'+classes).show();
     });
     
     $('.size').on("click", function() {
     $('.size').removeClass('active');
      $(this).addClass('active');
        $('.filter-button').removeClass('active').hide();
         var selected_new_filters = $(this).attr('class');
         var filteredAry = selected_new_filters.split(" ");
         var filteredAry = filteredAry.filter(function(e) { return e !== 'size' });
         for(i=0;i<filteredAry.length;i++) {
           $("[data-value="+filteredAry[i]+"]").show();
         }
     });
});

.active{background:green}
button{margin:10px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="grid grid-cols-4">
    <button id="five" class="size silver gold blue">5</button>
    <button id="six" class="size gold red">6</button>
    <button id="seven" class="size silver red blue">7</button>
    <button id="eight" class="size silver gold red">8</button>
    <button id="nine" class="size gold red">9</button>
    <button id="ten" class="size silver blue">10</button>
    <button id="eleven" class="size gold red">11</button>
    <button id="twelve" class="size silver red">12</button>
</div>
<div>
    <button class="filter-button" data-value="silver" data-type="material">silver</button>
    <button class="filter-button" data-value="gold" data-type="material">gold</button>
</div>      
<div>
    <button class="filter-button" data-value="red" data-type="color">red</button>
    <button class="filter-button" data-value="blue" data-type="color">blue</button>
</div>