多个复选框的Jquery过滤 [英] Jquery filtering with multiple Checkboxes

问题描述

对于当前项目，我创建了一个简单的产品目录，应该能够被Jquery使用几个复选框过滤。

For a current project I am creating a simple product catalogue which should be able to be filtered by Jquery with several sets of checkboxes.

在一个单一集合中，当选中两个或多个复选框时，逻辑应为OR，而使用两个或多个复选框时，应为AND。

In one single set when two or more checkboxes are checked the logic should be OR while when using two or more sets of checkboxes it should be AND.

我正在使用的一个好的（和工作）示例可以在这里找到：

A good (and working) example I am currently using can be found here:

http://stackoverflow.com/a/22941156/5567735

JSFIDDLE

if (cselector === '' && nselector === '') {
    $('.flowers > div').filter(selector).show();
} else if (cselector === '') {
    $('.flowers > div').filter(selector).filter(nselector).show();
} else if (nselector === '') {
    $('.flowers > div').filter(selector).filter(cselector).show();
} else {
    $('.flowers > div').filter(selector).filter(cselector).filter(nselector).show();
}

我的问题是关于这部分代码使用过滤器他们被选中。现在这对于在示例中使用的3个过滤器非常有用。我想知道有更好的方法来做这个吗？在我的情况下，我想添加一些更多的过滤器，然后这部分代码将很快，当我必须添加更多的if语句时。

My question regards this part of the code where the filters are being used in case they were selected. Now this works pretty good for the 3 filters that are being used in the example. What I am wondering is there some better way to be doing this? In my case I want to add some more filters and then this part of the code will get messy pretty soon when I have to add a lot more if statements.

我的问题是：使用这个设置，你将如何添加更多的过滤器，所以你有6或7而不是目前的3？

So basically my question is: Using this setup, how would you add more filters so you have 6 or 7 in the end instead of the current 3?

非常感谢，
Peter

Thanks a lot, Peter

PS我也喜欢完全不同的方法的提示，但是我已经花了很多时间，我真的想得到它的工作方式。

P.S. I also appreciate tips for completely different approaches but as I already put quite some time into this I would really like to get it work this way.

推荐答案

您当前的方法不是很动态，选择器和数组正在硬编码，所以每次添加新的过滤器选项，您都必须添加代码来处理它。

Your current approach isn't very dynamic, selectors and arrays are being hardcoded, so each time you add new filter options you'll have to add code to handle it.

相反，只需将更改处理程序绑定到所有过滤器复选框，就可以收集它们的值，并按照各自的名称对它们进行分组，例如：

Instead, just bind a change handler to all filter checkboxes, you can collect up their values, and group them by their respective names, eg:

var $filterCheckboxes = $( '.filter-checkboxes' );

$filterCheckboxes.on( 'change', function() {

  var selectedFilters = {};

  $filterCheckboxes.filter( ':checked' ).each( function() {

    if ( ! selectedFilters.hasOwnProperty( this.name ) ) {
      selectedFilters[ this.name ] = [];
    }

    selectedFilters[ this.name ].push( this.value );

  } );

} );

这将创建一个包含 input-name - >值数组对，例如：

This will create an object containing input-name -> value array pairs, eg:

selectedFilters = {
  'fl-colour': [ 'red', 'green' ],
  'fl-size': [ 'tiny' ]
};

然后，您可以遍历每个 selectedFilters 并过滤您的 .flower 元素。如果 .flower 元素与每个命名集中的值匹配，则返回true，以便该元素包含在 $ filteredResults collection：

You can then loop over each selectedFilters, and filter your .flower elements. If a .flower element matches a value in each named set, we return true so that the element is included in the $filteredResults collection:

// create a collection containing all of the filterable elements
var $filteredResults = $( '.flower' );

// loop over the selected filter name -> (array) values pairs
$.each( selectedFilters, function( name, filterValues ) {

  // filter each .flower element
  $filteredResults = $filteredResults.filter( function() {

    var matched = false,
        currentFilterValues = $( this ).data( 'category' ).split( ' ' );

    // loop over each category value in the current .flower's data-category
    $.each( currentFilterValues, function( _, currentFilterValue ) {

      // if the current category exists in the selected filters array
      // set matched to true, and stop looping. as we're ORing in each
      // set of filters, we only need to match once

      if ( $.inArray( currentFilterValue, filterValues) != -1 ) {
        matched = true;
        return false;
      }

    } );    

    // if matched is true the current .flower element is returned
    return matched;    

  } );

} );

然后只需隐藏所有 .flower 元素，并显示 $ filteredResults ，例如：

Then simply hide all the .flower elements, and show the $filteredResults, eg:

$( '.flower' ).hide().filter( $filteredResults ).show();

这篇关于多个复选框的Jquery过滤的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！