Filter content by multiple data attributes using jquery

Question

Using jQuery and Bootstrap I've created a simple filtering functionality. The code is below as well the jsFiddle. But somehow it doesn't work = doesn't show results. Despite the fact there are elements that should meet the criteria. What is wrong then?

$(document).ready(function() {
  $(".filters-1 li").click(function() {
    $(".filters-1 li").removeClass("active");
    $(this).addClass("active");
  });

  $(".filters-2 li").click(function() {
    $(".filters-2 li").removeClass("active");
    $(this).addClass("active");
  });

  $('.filters ul li a').on('click', function() {
    var category_list = [];

    $(this).each(function() {
      var category = $(this).val();
      // console.log(category);
      category_list.push(category);
    });

    if (category_list.length == 0)
      $('.filtered-content').fadeIn();
    else {
      $('.filtered-content').each(function() {
        platform = $(this).attr('data-platform');
        genre = $(this).attr('data-genre');

        if (jQuery.inArray(platform, category_list) > -1 && jQuery.inArray(genre, category_list) > -1)
          $(this).fadeIn('slow');
        else
          $(this).hide();
      });
    }
  });
});

.list-group-item a {
  text-decoration: none;
  color: grey;
}

.active {
  background: pink!important;
  border: red!important;
  -webkit-transition: background-color 200ms linear;
  -ms-transition: background-color 200ms linear;
  transition: background-color 200ms linear;
}

.active a {
  color: #fff;
  font-weight: bold;
}





  
    
      Type filters
      
        
          ALL
        
        
          DVDs
        
        
          Books
        
        
          Comicbooks
        
      
    
    
      Genre filters
      
        ALL
        Comic
        Drama
        Comedy
        Poetry

JSfiddle is here

I've doubled checked if there are any typos in doing the js code as well checked the HTML code. But have no clue why it doesn't work.

Martin Szymanski · Answer

Thank you for such an interesting thread. I have tried to rework your code to be more adapted to my testing project needs.

I would like to extend the JS functionality by adding a possibility of having a multiple data-attribute values. So in practice, now your code works only when data-attribute="singleValue".

What I'm trying to achieve is to make it working in condition when data-attribute="firstValue secondValue". As you will notice, this thing is visible in both filtering lists (in my example it's applicable with PC and PS4/PS5) and the results.

HTML:


  
    
      
        Platform filters
      
      
        
          ALL
        
          PC
        
          PS4 & PS5
        
          Xbox
      
    

    
      
        Type filters
      
      
        ALL
        RPG
        Adventure
        Shooter
        Simulator
        Arcade
      
    
  

  

    
    PC | RPG 
    

    
    PC | adventure
    

    
     xbox | shooter 
    

    
     ps4 and ps5 | simulator
    

    
     ps5 and xbox | arcade 
    

    
    pc-steam | adventure shooter
    

    
     pc-epic and pc-gog and xbox | rpg and adventure

JS:

(function($){ 
    $(".filters-1 li").click(function() {
        $(".filters-1 li").removeClass("active");
        $(this).addClass("active");
        filter();
      });
    
      $(".filters-2 li").click(function() {
        $(".filters-2 li").removeClass("active");
        $(this).addClass("active");
        filter();
      });
      
      function filter() {
        var category_list = [];
    
        $(".filters ul li.active a").each(function() {
          var category = $(this).attr("data-platform") || $(this).attr("data-type");
          
          console.log(category);
          category_list.push(category);
        });
    
        //console.log(category_list)
        
        if (category_list.length == 0)
          $('.filtered-content > .object').fadeIn();
        else {
          $('.filtered-content > .object').each(function() {
            platform = $(this).attr('data-platform');
            type = $(this).attr('data-type');
    
            console.log(platform, type, jQuery.inArray(platform, category_list))
            if ((jQuery.inArray(platform, category_list) != -1 || jQuery.inArray('platform', category_list) != -1) && (jQuery.inArray(type, category_list) != -1 || jQuery.inArray('type', category_list) != -1))
              $(this).fadeIn('slow');
            else
              $(this).hide();
          });
        }
      }
     
})(jQuery);

CSS:

.list-group-item a {
  text-decoration:none;
  color:grey;
}

.active {
  background:black!important;
  border:black!important;
      -webkit-transition: background-color 200ms linear;
    -ms-transition: background-color 200ms linear;
    transition: background-color 200ms linear;
    border-radius:0;
}

.active a {
  color:#fff;
  font-weight:bold;
}

.object {
  background:#acacac;
  color:black;
  padding:1em;
  width:10em;
  height:10em;
  margin:1em;
}

From my knowledge and understanding it is doable. JSFiddle is here

Filter content by multiple data attributes using jquery

1 Answers