0

I am working on a filter system for a website whereby products can be filtered to show only those that are selected. I have the following working model:

 $(function() {
        var selectedClass = "";
        $(".category").click(function(){ 
        selectedClass = $(this).attr("data-rel"); 
     $(".products").fadeTo(100, 0.1);
        $(".products .all").not("."+selectedClass).fadeOut().removeClass('show');
    setTimeout(function() {
      $("."+selectedClass).fadeIn().addClass('show');
      $(".products").fadeTo(300, 1);
    }, 300); 

    });
});

Items are filtered using a list and the data-rel selects only those items that have the class assigned to them. This all works fine but I now need the items to be filtered by more than one selection. I want a user to be able to select from one list two options but I only want the options to show that fit both criteria.

For example, if I have items such as 'red' 'green' and 'blue' as well as 'square' 'circle' and 'triangle', I want a user to be able to select 'red' and 'square' and for the results to show only the items that match both of those selections as opposed to all items that match either.

Any help would be much appreciated.

Improve this question
6
  • See if this thread can offer some help. It talks about filtering on multiple data attributes similar to what I think you are looking for. Commented Jan 21, 2020 at 20:53
  • That is along the right lines but it's specific in the selections, i need a solution that works without me being specific as i need the user to make the selection of what to add or remove. Commented Jan 21, 2020 at 21:11
  • Do you have a sample of your html you can share? Is . category a button? Commented Jan 22, 2020 at 14:48
  • Sure, for instance the selectors are as follows: Commented Jan 22, 2020 at 18:15
  • <li class="nav-item col-lg-4 col-md-4 col-6"> <a class="nav-link category" data-rel="bricks">Bricks</a> </li> Commented Jan 22, 2020 at 18:22
Related questions
6
Multiple filters with Jquery
0
jQuery Multiple Select Filter :first
0
Filter based on combination of multiple select and single select elements
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.