Javascript 如何在多复选框过滤器中缩小搜索结果？

这是我上一个问题的后续问题：

非常感谢在我之前的问题中帮助我的每个人。基本上，我想创建复选框，根据div项所属的类来隐藏和显示它们。过滤器分为两类，每个类别中有两个选项：citiesFilter（hamiltonFilter+torontoFilter）和costFilter（cheapEatsFilter+costFilter）

• 选中每个类别中的两个框应增加出现的
  元素的数量（即，单击“hamiltonFilter”和“torontoFilter”应显示具有任一类别的
  元素）
• 在两个类别之间选中两个框应缩小显示的
  元素数量（即，单击“hamiltonFilter”和“cheapEatsFilter”应仅显示同时具有这两个类的
  元素）

前面的答案有效，但只适用于每个类别；当我单击“hamiltonFilter”和“cheapEatsFilter”时，它并没有缩小结果范围，而是显示了这两个类的所有

元素。我试图修改他们的代码，但无法确定如何使用这两个类选择

元素

编辑：输入错误的jfiddle

$(document).ready(function() {

    $('#checkboxFilterContainer').find('input:checkbox').on("change", function() {

    var $citiesIDs, $costIDs = [];

    var $citiesCategory = $('#citiesFilterContainer').find('input:checked');
    var $costCategory = $('#costFilterContainer').find('input:checked');

    $citiesCategory.each(function(index, element) {
        $citiesIDs.push(element.getAttribute('id'));
      });

    $costCategory.each(function(index, element) {
        $costIDs.push(element.getAttribute('id'));
      });

    var $totalLength = ($citiesIDs.length + $costIDs.length);

    if ($totalLength == 0) {
       $('.blogpost').removeClass('hide');
      } else {
       $('.blogpost').addClass('hide'); 
       for(i = 0; i < $totalLength; i++) {
           var x = $citiesIDs[i];
           var y = $costIDs[i];
           var xClass = $('.' + x);
           var yClass = $('.' + y);
           $('.x.y').removeClass('hide');     
       }
        }
    })
})

$（文档）.ready（函数（）{
$（'#checkboxFilterContainer'）.find（'input:checkbox'）.on（“change”，function（））{
var$citiesIDs，$costIDs=[]；
var$citiesCategory=$（“#citiesFilterContainer”）.find（'input:checked'）；
var$costCategory=$（“#costFilterContainer”）.find（'input:checked'）；
$citiesCategory.每个（函数（索引，元素）{
$citiesIDs.push（element.getAttribute（'id'））；
});
$costCategory.每个（功能（索引、元素）{
$costIDs.push（element.getAttribute（'id'））；
});
var$totalLength=（$citiesIDs.length+$costIDs.length）；
如果（$totalLength==0）{
$（'.blogpost'）.removeClass（'hide'）；
}否则{
$（'.blogpost'）.addClass（'hide'）；
对于（i=0；i<$totalLength；i++）{
var x=$citiesIDs[i]；
变量y=$costIDs[i]；
变量xClass=$（'.'+x）；
var yClass=$（'.'+y）；
$（'.x.y'）.removeClass（'hide'）；
}
}
})
})

将隐藏类添加到所有帖子中

为所选城市创建或选择器（.firstId、.secondId、…）

为所选成本创建一个或选择器

如果给定了城市ID，则按该或选择器筛选帖子

如果给出了成本ID，则通过该或选择器进行进一步筛选（或首次筛选）

对于剩余的所有帖子，删除隐藏类

var$filteredPosts=$（'.blogpost'）.addClass（'hide'）；
如果（$总长度）{
var citiesOrSelector='.'+$citiesIDs.join（'，.）；
var costsOrSelector='.'+$costIDs.join（'，'）；
如果（$CitiesId.length）$filteredPosts=$filteredPosts.filter（citiesOrSelector）；
如果（$CostId.length）$filteredPosts=$filteredPosts.filter（costsOrSelector）；
}
$filteredPosts.removeClass（'hide'）