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

Question

这是我上一个问题的后续： 多复选框过滤器：如何同时获得加法和减法效果

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

• 在每个类别中选中两个框应该会增加出现的<div>元素的数量（即单击“hamiltonFilter”和“torontoFilter”应该显示具有任一类的<div>元素）
• 检查两个类别之间的两个框应缩小出现的<div>元素的数量（即单击“hamiltonFilter”和“cheapEatsFilter”应仅显示具有两个类的<div>元素）

以前的答案有效，但仅限于每个类别； 当我单击 'hamiltonFilter' 和 'cheapEatsFilter' 时，它不会缩小结果范围，而是向我显示具有任一类的所有<div>元素。 我尝试修改他们的代码，但无法弄清楚如何使用这两个类选择<div>元素。

https://jsfiddle.net/de1zc7vx/1/

编辑：放入错误的 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');     
       }
        }
    })
})

Answer 1

1. 将隐藏类添加到所有帖子
2. 为选定的城市创建一个 OR 选择器（.firstId、.secondId、...）
3. 为选定的成本制作 OR 选择器
4. 如果给出了城市 ID，则通过该 OR 选择器过滤帖子
5. 如果给出了成本 ID，则通过该 OR 选择器进一步（或第一次）过滤
6. 对于所有剩余的帖子，删除隐藏类

 var $filteredPosts = $('.blogpost').addClass('hide'); if ($totalLength) { var citiesOrSelector = '.'+ $citiesIDs.join(',.'); var costsOrSelector = '.'+ $costIDs.join(',.'); if ($citiesIDs.length) $filteredPosts = $filteredPosts.filter(citiesOrSelector); if ($costIDs.length) $filteredPosts = $filteredPosts.filter(costsOrSelector); } $filteredPosts.removeClass('hide');