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

【问题标题】：How to narrow search results in a multiple checkbox filter?如何在多个复选框过滤器中缩小搜索结果？
【发布时间】：2019-12-31 06:41:25
【问题描述】：

这是我之前问题的后续：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');     
       }
        }
    })
})

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

为所有帖子添加隐藏类
为选定的城市 (.firstId,.secondId,...) 制作 OR 选择器
为所选成本创建 OR 选择器
如果给出了城市 ID，则按该 OR 选择器过滤帖子
如果给出了成本 ID，则通过该 OR 选择器进一步（或第一次）过滤
对于剩余的所有帖子，删除隐藏类

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');

【讨论】：