如何优化我的jQuery代码，以便缩小范围并显示（过滤）特定内容

有什么方法可以优化我的代码，以便在过滤时可以获得更精确的结果？例如，当您在PC上检查RTS（战略游戏）时，想要获得PC的战略游戏（您应该获得StarCraft），但同时获得PC和Strategy的所有游戏，因此，这只是添加到游戏库中而不会缩小向下...在此先感谢您的任何投入。

有人可以提供一些有关如何优化我的代码的指示，以便在过滤时可以获得更精确的结果吗？例如，当您在PC上检查RTS（战略游戏）时，想要获得PC的战略游戏（您应该获得StarCraft），但同时获得PC和Strategy的所有游戏，因此，这只是添加到游戏库中而不会缩小向下...在此先感谢您的任何投入。

http://codepen.io/anon/pen/azaoPj

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