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

Question

这是我之前问题的后续问题:Multiple checkbox filter: how to get both and additive and subtractive effect

非常感谢在我上一个问题中帮助过我的所有人。基本上，我想根据它们所具有的类来制作隐藏和显示 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');