使用 AJAX 进行多次检查的搜索结果过滤器

Question

在我的旅行网站中，我想使用多个复选框过滤搜索结果。目前我的代码工作如下。

如果我选中“机场附近”，它将只显示带有数据标签“机场”的酒店。但是当我想同时过滤靠近机场和购物区的酒店时，它就不起作用了。它显示具有数据标签“机场”或“购物”的酒店列表。我想将其更改为列出同时具有数据标签“机场”和“购物”的酒店。

网站截图http://prntscr.com/c49csj

上下文中的代码

$(document).ready(function(){
    $('.category').on('change', function(){
      var category_list = [];
      $('#filters :input:checked').each(function(){
        var category = $(this).val();
        category_list.push(category);
      });

      if(category_list.length == 0)
        $('.resultblock').fadeIn();
      else {
        $('.resultblock').each(function(){
          var item = $(this).attr('data-tag');
          var itemarr = item.split(',');
          $this = $(this);
          $.each(itemarr,function(ind,val){
            if(jQuery.inArray(val,category_list) > -1){
              $this.fadeIn('slow');
              return false;
            }
            else
              $this.hide();
          });
        });
      }   
    });
  }); 

Answer 1

您需要确保category_list 数组中的所有元素都在itemarr 数组中可用。帖子How to check whether multiple values exist within an Javascript array 应该可以解决您的问题，例如在 else 块中，修改您的代码如下：

 var item = $(this).attr('data-tag');
 var itemarr = item.split(',');
 var hideItem = false;
 for(var i = 0 , len = itemarr.length; i < len && !hideItem; i++){
     hideItem = ($.inArray(itemarr[i], category_list) == -1);
  }
  if(hideItem) {
    $this.hide();
  } else {
    $this.fadeIn('slow');
  }