Is there someway to filter elements with common class?

Is there someway to filter elements with common class?

Is there a way to get elements with multiple classes and to show only those elements with common classes? In my example im trying to make a filter for games with genre and platform, so when you check FPS or any other genre, and platform PC, PS3, or Xbox etc, it will narrow down the results and show all FPS games that are for lets say Xbox360, thus making FPS and X360 common classes for those elements.


  1. <div id="container">

  2.   <div id="filter">
  3.     <h3>Filter games </h3>
  4.     <div class="category-filters"><img id="reset" src="http://www.asus.com/media/images/rest.png" alt="" />Reset</div>
  5.     <div class="category-filters">
  6.       <div class="genre">
  7.         <img src="http://www.asus.com/media/images/close_round.png" id="open" class="col"/> Genre
  8.       </div>

  9.       <div id="genre-filters">
  10.         <ul  class="filter-options">
  11.           <li><input type="checkbox" value="filter_action" data-filter_id="action"> Action</li>
  12.           <li><input type="checkbox" value="filter_fps" data-filter_id="fps"> FPS</li>
  13.           <li><input type="checkbox" value="filter_rpg" data-filter_id="rpg"> RPG<li>
  14.           <li><input type="checkbox" value="filter_rts" data-filter_id="rts"> RTS</li>
  15.           <li><input type="checkbox" value="filter_adventure" data-filter_id="adventure"> Adventure</li>
  16.         </ul>
  17.       </div> 
  18.     </div>

  19.     <div class="category-filters">
  20.       <div class="brand">
  21.         <img src="http://www.asus.com/media/images/close_round.png" id="open" class="col1"/> Platform
  22.       </div>

  23.       <div id="brand-filters" class="category-filters">
  24.         <ul  class="filter-options">
  25.           <li><input type="checkbox" value="filter_pc" data-filter_id="pc"> PC</li>
  26.           <li><input type="checkbox" value="filter_ps3" data-filter_id="ps3"> PS3</li>
  27.           <li><input type="checkbox" value="filter_ps4" data-filter_id="ps4"> PS4<li>
  28.           <li><input type="checkbox" value="filter_x360" data-filter_id="x360"> Xbox 360</li>
  29.           <li><input type="checkbox" value="filter_xone" data-filter_id="xone"> Xbox one</li>
  30.         </ul>
  31.       </div> 
  32.     </div>

  33.   </div>


  34.   <div id="products">
  35.     <ul id="product-list">

  36.       <li class="filter_pc filter_fps filter_xone">
  37.         <img src="https://encrypted-tbn0.gstatic.com/shopping?q=tbn:ANd9GcRq1K6i1syrOr20l1k43vcJCSjeMHJP7c0w-xS-xmpSUPM1EuGGLPNI73gox8cbJX9k0tlRtvfm&usqp=CAE" alt="" />
  38.       </li>

  39.       <li class="filter_action filter_adventure filter_pc filter_ps3 filter_x360">
  40.         <img src="http://s4.thcdn.com/productimg/0/300/300/52/10780752-1370965433-955769.jpg" alt="" />  
  41.       </li>

  42.       <li class="filter_fps filter_pc filter_ps3 filter_x360">
  43.         <img src="http://s2.thcdn.com/productimg/0/300/300/42/10846642-1389618973-536407.jpg" alt="" />
  44.       </li>  

  45.       <li class="filter_rts filter_pc">
  46.         <img src="http://s2.thcdn.com/productimg/0/300/300/01/10654001-1353502110-933610.jpg" alt="" />
  47.       </li>

  48.       <li class="filter_rpg filter_ps4">
  49.         <img src="http://s2.thcdn.com/productimg/0/180/180/92/10968092-1422879679-941767.jpg" alt="" />
  50.       </li>


  51.       <li class="filter_fps filter_pc">
  52.         <img src="http://upload.wikimedia.org/wikipedia/en/f/f4/Unrealtournament.jpg" alt="" />
  53.       </li>

  54.       <li class="filter_fps filter_pc">
  55.         <img src="http://upload.wikimedia.org/wikipedia/en/a/a1/Quake3Title.jpg" alt="" />
  56.       </li>

  57.     </ul> 

  58.   </div>

  59. </div>


  60. $(document).ready(function () {
  61.   
  62.   $(".filter-options :checkbox").click(function(){
  63.     $("#product-list li").hide();
  64.     var search = '',
  65.         genres = [];
  66.     $(".filter-options :checkbox:checked").each(function(){
  67.       genres.push("." + $(this).val());
  68.     });
  69.     search = genres.join(', ');
  70.     $(search).fadeIn();
  71.     if ($('.filter-options :checkbox').filter(':checked').length == 0 ) {
  72.       $("#product-list li").fadeIn();
  73.     }
  74.   });
  75. });