具有多个选项的Javascript过滤器不显示包含所有元素的结果

Question

我有一个javascript过滤器（多个选项），为用户提供了按以下方式过滤食谱的选项：

• 分类
• 份量
• Cookingtime

如果有人从3个选项中的每个选项或2个选项中选择了一个过滤器，我希望结果只显示其中包含所有 3个选项的食谱，或者 ALL < / strong> 2个选项。

现在，如果选择了多个过滤器，它将显示包含其中一个过滤器的所有结果，但不会显示所有已选择的过滤器。

这是我的代码：

filterRecipes: function() {
    $.each(this.recipes, function(index, recipe) {
      recipe.$el.show();
    });
    for(var filter in this.filters) {
      if(filter == 'category' && this.filters[filter].length > 0) {
        for(var i=0;i<this.recipes.length;i++) {
          if(this.filters[filter].indexOf(this.recipes[i].category) == -1) {
            this.recipes[i].$el.hide();
          } else {
            this.recipes[i].$el.show();
          }
        }
      }
      else if(filter == 'servings' && this.filters[filter].length > 0) {
        for(var i=0;i<this.recipes.length;i++) {
          if(this.filters[filter].indexOf(this.recipes[i].servings) == -1) {
            this.recipes[i].$el.hide();
          } else {
            this.recipes[i].$el.show();
          }
        }
      }
      else if(filter == 'cookingtime' && this.filters[filter].length > 0) {
        for(var i=0;i<this.recipes.length;i++) {
          if(this.filters[filter].indexOf(this.recipes[i].cookingtime) == -1) {
            this.recipes[i].$el.hide();
          } else {
            this.recipes[i].$el.show();
          }
        }
      }
    }
  }

HTML：

<div class="row">
<div id="recipe-search-results"></div>
<aside id="text-7" class="widget shadow widget_text">
<div class="textwidget" id="recipe-search-filters" style="padding: 10px;">
    <fieldset>
        <label for="category">Category</label>
    </fieldset>
    <fieldset>
        <label for="servings">Servings</label>
    </fieldset>
    <fieldset>
        <label for="cookingtime">cooking Time</label>
    </fieldset>
</aside>
</div>
</div>

基本上，过滤器需要相互配合才能显示结果，而不是单独使用。

有什么想法吗？