使用多个复选框进行 Jquery 过滤

对于当前的项目，我正在创建一个简单的产品目录，该目录应该能够通过带有几组复选框的 Jquery 进行过滤。

在一组或多组复选框中，当选中两个或更多复选框时，逻辑应为“或”，而在使用两组或更多组复选框时，逻辑应为“与”。

我目前正在使用的一个很好的（并且有效的）示例可以在这里找到：

https://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 语句时，这部分代码很快就会变得混乱。

所以基本上我的问题是：使用此设置，您将如何添加更多过滤器，以便最终有 6 或 7 个而不是当前的 3 个？

多谢， 彼得

附：我也很欣赏完全不同方法的建议，但由于我已经投入了相当多的时间，所以我真的很想让它以这种方式工作。

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

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

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 -> value array对，例如：

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

然后你可以循环每个selectedFilters，并过滤你的.flower元素。的一个.flower元素与每个命名集中的值匹配，我们返回 true，以便该元素包含在$filteredResults收藏：

// 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, eg:

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

这是一个小提琴示例