Cant filter 2 or more options from same category

I have some problem filtering checkbox options, lets say you want to show Action and RTS games which should get you Assassins Creed and StarCraft, but instead im not getting anything.

heres a codepen too see the code: http://codepen.io/anon/pen/vEzGYa

Thanks in advance for any input.

    <div id="container">

  <div id="filter">
    <h3>Filter By</h3>
    <div class="category-filters"><img id="reset" src="http://www.asus.com/media/images/rest.png" alt="" />Reset</div>
    <div class="category-filters">
      <div class="genre">
        <img src="http://www.asus.com/media/images/close_round.png" id="open" class="col"/> Genre
      </div>

      <div id="genre-filters">
        <ul  class="filter-options">
          <li><input type="checkbox" value="filter_action" data-filter_id="action"> Action</li>
          <li><input type="checkbox" value="filter_fps" data-filter_id="fps"> FPS</li>
          <li><input type="checkbox" value="filter_rpg" data-filter_id="rpg"> RPG<li>
          <li><input type="checkbox" value="filter_rts" data-filter_id="rts"> RTS</li>
          <li><input type="checkbox" value="filter_adventure" data-filter_id="adventure"> Adventure</li>
        </ul>
      </div> 
    </div>

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

      <div id="brand-filters" class="category-filters">
        <ul  class="filter-options">
          <li><input type="checkbox" value="filter_pc" data-filter_id="pc"> PC</li>
          <li><input type="checkbox" value="filter_ps3" data-filter_id="ps3"> PS3</li>
          <li><input type="checkbox" value="filter_ps4" data-filter_id="ps4"> PS4<li>
          <li><input type="checkbox" value="filter_x360" data-filter_id="x360"> Xbox 360</li>
          <li><input type="checkbox" value="filter_xone" data-filter_id="xone"> Xbox one</li>
        </ul>
      </div> 
    </div>

  </div>


  <div id="products">
    <ul id="product-list">

      <li class="filter_pc filter_fps filter_xone">
        <img src="https://encrypted-tbn0.gstatic.com/shopping?q=tbn:ANd9GcRq1K6i1syrOr20l1k43vcJCSjeMHJP7c0w-xS-xmpSUPM1EuGGLPNI73gox8cbJX9k0tlRtvfm&usqp=CAE" alt="" />
      </li>
      <li class="filter_action filter_adventure filter_pc filter_ps3 filter_x360">
        <img src="http://s4.thcdn.com/productimg/0/300/300/52/10780752-1370965433-955769.jpg" alt="" />  
      </li>
      <li class="filter_fps filter_pc filter_ps3 filter_x360">
        <img src="http://s2.thcdn.com/productimg/0/300/300/42/10846642-1389618973-536407.jpg" alt="" />
      </li>  
      <li class="filter_rts filter_pc">
        <img src="http://s2.thcdn.com/productimg/0/300/300/01/10654001-1353502110-933610.jpg" alt="" />
      </li>
      <li class="filter_rpg filter_ps4">
        <img src="http://s2.thcdn.com/productimg/0/180/180/92/10968092-1422879679-941767.jpg" alt="" />
      </li>
    </ul> 

  </div>

</div>

jQuery:

$(document).ready(function () {

  $(".filter-options :checkbox").click(function(){
    $("#product-list li").hide();
    $(".filter-options :checkbox:checked").each(function(){
      $("." + $(this).val()).fadeIn();
    });
    if ($('.filter-options :checkbox').filter(':checked').length == 0 ) {
      $("#product-list li").fadeIn();
    }
  });
});

The problem is your code here:

var search='';
$(".filter-options :checkbox:checked").each(function(){
    search += "." + $(this).val();
});
$(search).fadeIn();

If you log the value of search to the console, you’ll see that for more than one genre your selector looks like .filter_action.filter_rts which doesn’t match any elements.

What you really want is to separate each class selector with a comma. One way to do this is to add each genre class to an array and then join the array to get your string:

var search = '',
    genres = [];

$(".filter-options :checkbox:checked").each(function(){
    genres.push("." + $(this).val());
});

search = genres.join(', ');

Here’s the updated codepen.

1 Like

Thank you for your help, i really appreciate it.

Ops got another problem :frowning: how to narrow down the results? Lets say i want to show FPS games for Xbox360 and it should show only Titanfall, but instead its adding the Xbox360 class elements. The previous code was doing this to some extent. :pensive:

http://codepen.io/anon/pen/raZLxr - added more games so this example can be demonstrated.

Hmm, yeah I hadn’t really thought about the platform selectors… OK, so I came up with a way to get both filters working, but there maybe someone here who can think of a better/more efficient way to do it.

First of all, create an array of selected genre classes, and one for platforms:

$("#genre-filters :checkbox:checked").each(function(){
    genres.push($(this).val());
});
    
$("#brand-filters :checkbox:checked").each(function(){
    platforms.push($(this).val());
});

Then grab all the product LIs and filter them, checking each one to see if it has any of the selected classes:

$('#product-list li').filter(function(index){
      var product = $(this),
          hasGenre = false,
          hasPlatform = false;
          
      if (genres.length > 0) {
          $.each(genres, function(index, genre) {
              if (product.hasClass(genre)) hasGenre = true;
          });
      } else {
          hasGenre = true // if no genres checked, show all
      }
      
      if (platforms.length > 0) {
          $.each(platforms, function(index, platform) {
              if (product.hasClass(platform)) hasPlatform = true;
          });
      } else {
          hasPlatform = true  // if no platforms checked, show all
      }

      return hasGenre && hasPlatform;
}).fadeIn();

Updated codepen here.

1 Like

I`ve been searching around to see if there is something in jquery that would enable selecting elements with common classes, so in my example if you check on FPS games it will list all FPS-class games, and if you check on Xbox 360 it will list those games that have the class x360, then try to look for the common classes in those games. Anyway, thank you again for your help and time.

jQuery has a wide range of attribute-selectors that can let you select ones depending on if they start with a certain term, of contain a term that you’re interested in.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.