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


这是我上一个问题的后续解答：Multiple checkbox filter: how to get both and additive and subtractive effect

非常感谢在上一个问题中为我提供帮助的每个人。基本上，我想根据它们具有的类来制作用于隐藏和显示div项目的复选框。过滤器分为两个类别，每个类别中都有两个选项： cityFilter （hamiltonFilter + torontoFilter）和 costFilter （cheapEatsFilter + costFilter）。

  • 选中每个类别中的两个框应增加出现的<div>个元素的数量（即，单击“ hamiltonFilter”和“ torontoFilter”应显示<div>个元素，其中包含课）
  • 选中两个类别之间的两个框 可以缩小出现的<div>元素的数量（即，单击“ hamiltonFilter”和“ cheapEatsFilter”应仅显示具有以下内容的<div>个元素两个课程）

先前的答案有效，但每个类别中仅 个内；当我单击“ hamiltonFilter”和“ cheapEatsFilter”时，它不会缩小结果，而是向我显示所有带有任一类的<div>元素。我尝试修改他们的代码，但无法弄清楚如何为两个类的<div>元素进行选择。

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

编辑：放入错误的小提琴

$(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');     
       }
        }
    })
})

1 个答案:

答案 0 :(得分：0)

  1. 将hide类添加到所有帖子中
  2. 为所选城市（.firstId，.secondId，...）做一个OR选择器
  3. 为所选费用创建OR选择器
  4. 如果提供了城市ID，请按该OR选择器过滤帖子
  5. 如果给出了费用编号，则通过该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');



Similar searches