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();
     });
});

Maybe you can use something like this -> kunkalabs.com/mixitup — tenzin
– tenzin, Commented Jan 23, 2021 at 17:32

Amit Saini · Accepted Answer · 2021-01-23 19:08:36Z

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>

edited Jan 23, 2021 at 19:08

answered Jan 23, 2021 at 17:35

Amit Saini

5955 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

fred Over a year ago

that looks great, i edited my post but maybe a bit late, I was also wondering how this could also work with size also being a filter option. As in if you select a size, or a size and another option, it shows or hides which materials and/or colors are available

Amit Saini Over a year ago

Welcome, @fred. Is this code is good for you or I need to change anything else?

fred Over a year ago

refer to my above comment, does that make sense? size nine for example isn't available in silver or in blue so if you click on nine, silver and blue would disappear.

fred Over a year ago

It doesn't seem to behave any differently, I can't see any differences in the code either. Unless it can take some time before a stackoverflow post updates... ?

fred Over a year ago

Let us continue this discussion in chat.

Collectives™ on Stack Overflow

jquery filter categories with multiple conditions

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related