使用多个Checkbox进行Jquery过滤

Question

对于当前项目,我正在创建一个简单的产品目录,应该可以通过Jquery使用几组复选框进行过滤.

在选中两个或更多复选框的单个集合中,逻辑应为OR,而当使用两个或更多复选框时,它应为AND.

我目前使用的一个好的(和工作)示例可以在这里找到:

/sf/answers/1605880951/

的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？

非常感谢,彼得

PS我也很欣赏完全不同的方法提示,但由于我已经花了很长时间,我真的很想让它以这种方式工作.

Answer 1

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

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

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,例如:

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

这是一个小例子