多重复选框过滤器:如何同时获得加减作用 [英] Multiple checkbox filter: how to get both and additive and subtractive effect

问题描述

我想创建一个复选框，根据它们具有的类来隐藏和显示div项.过滤器分为两类:城市和成本.

I want to make checkboxes that hide and show div items based on what class(es) they have. The filters are separated into two categories: city and cost.

• 选中内中的两个复选框，每个类别应添加一个添加剂 效果(即理想情况下，如果我选中汉密尔顿"和多伦多" 元素应该显示出来.)
• 选中两个复选框 类别应具有减法作用(即，如果我检查了 多伦多"和便宜吃"，我应该只看到一个博客文章.

• Checking two checkboxes within each category should have an additive effect (i.e. if I checked 'Hamilton' and 'Toronto' ideally all elements should show up).
• Checking two checkboxes between two categories should have a subtractive effect (i.e. if I checked 'Toronto' and 'Cheap Eats', I should only see one blogpost).

我现在拥有的代码当前在选中一个复选框时有效，但是在选中两个复选框时不起作用 即，如果我选中多伦多"和便宜的食物"，则汉密尔顿"和多伦多"的结果都会出现在便宜的食物"中. 即，如果我选择汉密尔顿"和多伦多"，则只会出现汉密尔顿"结果.

The code I have now, currently, works when you have one checkbox checked but doesn't work when you have two checkboxes checked i.e. if I check 'Toronto' and 'Cheap Eats', both 'Hamilton' and 'Toronto' results come up for 'Cheap Eats'. i.e. If I select 'Hamilton' and 'Toronto', only 'Hamilton' results come up.

我一般对JS和编程都是新手，因此非常感谢您的帮助！

I'm very new to JS and programming in general, so any help is greatly appreciated!

提琴: https://jsfiddle.net/brsahodL/1/

$(document).ready(function() {

  $('#checkboxFilterContainer').find('input:checkbox').on("click", function() {
    var $blogpostsTotal = $('.blogpost').length;
    var $checkboxCategory = $('#checkboxFilterContainer').find('input:checked');
    var $checkboxID = $checkboxCategory.attr('id');

    if ($checkboxCategory.length == 0) {
      $('.blogpost').removeClass('hide');
    } else {
      $('.blogpost').addClass('hide');
      $('.' + $checkboxID).removeClass('hide');
    }
  });
});

推荐答案

var $checkboxID = $checkboxCategory.attr('id');行将获取第一个被检查元素的ID.当选择多个复选框，则需要所有的ID是过的框.为此，您可以使用数组来跟踪它们.

The line var $checkboxID = $checkboxCategory.attr('id'); will get the first checked element's ID. When multiple checkboxes are selected, you need all the ID's of the checked boxes. In order to do that, you can keep track of them using an array.

类似这样的东西:

$(document).ready(function() {

  $('#checkboxFilterContainer').find('input:checkbox').on("click", function() {
    var $blogpostsTotal = $('.blogpost').length;
    var $checkboxCategory = $('#checkboxFilterContainer').find('input:checked');
    var $checkboxID = $checkboxCategory.attr('id');
    var $checkboxIDs = [];
    $checkboxCategory.each(function(index, element) {
      $checkboxIDs.push(element.getAttribute('id'));
    });

    if ($checkboxCategory.length == 0) {
      $('.blogpost').removeClass('hide');
    } else {
      $('.blogpost').addClass('hide');
      for (var i = 0; i < $checkboxIDs.length; i++) {
        $('.' + $checkboxIDs[i]).removeClass('hide');
      }

    }
  })
})

这篇关于多重复选框过滤器:如何同时获得加减作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！