Question

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

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

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

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

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？

非常感谢，彼得

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

Answer 1

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

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

void Func(const int *& pInt)
//                   ^

这将创建一个包含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元素与每个命名集中的值匹配，则返回true，以便该元素包含在.flower集合中：

$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

Here's an example fiddle

Answer 2

这是来自billyonecan的jsfiddle的一个分支。差异是......

未选中框表示该属性已从结果中排除
默认选中所有复选框（显示所有结果）
必须至少检查每个过滤器组的一个复选框
如果过滤器组未提交过滤器，则隐藏所有结果
如果添加了新的过滤器组，则会自动处理

（（a || b || c）＆amp;＆amp;（x || y || z）＆amp;＆amp;（1 || 2 || 3）...）

。 jsFiddle

＆＃13;

var $filterCheckboxes = $('input[type="checkbox"]');

  // Read All Available Filter Groups
  var allFilters = [];
  $filterCheckboxes.each(function() {
  	if ($.inArray(this.name,allFilters) == -1){
    	allFilters.push(this.name);
    }  
  });
//  console.log(allFilters); 






$filterCheckboxes.on('change', function() {

  // create a collection containing all of the filterable elements
  var $filteredResults = $('.item');

	var $filterCategoryApplied = 0;
  
  $.each(allFilters, function(arIndex, filterName) {
  // console.log(filterName); 
	var $filterCheckboxCategory = $('input[name='+filterName+']').filter(':checked');
	
  console.log(filterName + ' length = ' + $filterCheckboxCategory.length);
   
   if ( $filterCheckboxCategory.length === 0 ) {
//    alert('none checked for ' + filterName);
    $filteredResults = [];
   }
  });




console.log('start checking');



	// Read Selectetd Filters
  var selectedFilters = {};
  $filterCheckboxes.filter(':checked').each(function() {
    if (!selectedFilters.hasOwnProperty(this.name)) {
      selectedFilters[this.name] = [];
    }
    selectedFilters[this.name].push(this.value);
  });
  
  

  



  // loop over the selected filter name -> (array) values pairs
  $.each(selectedFilters, function(name, filterValues) {

//console.log(selectedFilters['fl-colour'].length); 
//console.log(name); 
//console.log(filterValues); 
//console.log(filterValues.length); 



    // 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;

    });
  });

  $('.item').hide().filter($filteredResults).show();

});

＆＃13;

body {
  font-family: 'Arial';
  color: #646464;
}


.items-wrap {
  float: left;
  width: 20%;
  margin: 0 3% 0 0;
  padding: 0;
  position: relative;
}

.items {
  float: left;
  width: 60%;
}

.items div.item {
  float: left;
  width: 45%;
  height: 28px;
  line-height: 38px;
  padding: 0 1%;
  background: #eee;
  margin: 0 0 1px;
  position: relative;
  font-size: 0.7em;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<pre id=result> </pre>

<div class="items-wrap">

  <h3 style="font-size:13px; font-weight:normal;">Filter Items</h3>
  <p style="font-size:12px;"><strong>By colour:</strong></p>
  
  <form id='filters'>
    <label style="font-size:12px;">
      <input type="checkbox" name="fl-colour" value="red" id="red" checked /> Red</label>
    <br>
    <label style="font-size:12px;">
      <input type="checkbox" name="fl-colour" value="yellow" id="yellow" checked /> Yellow</label>
    <br>
    <label style="font-size:12px;">
      <input type="checkbox" name="fl-colour" value="green" id="green" checked /> Green</label>

    <p style="font-size:12px;"><strong>By size:</strong></p>
    <label style="font-size:12px;">
      <input type="checkbox" name="fl-size" value="small" id="small" checked /> Small</label>
    <br>
    <label style="font-size:12px;">
      <input type="checkbox" name="fl-size" value="medium" id="medium" checked /> Medium</label>
    <br>
    <label style="font-size:12px;">
      <input type="checkbox" name="fl-size" value="large" id="large" checked /> Large</label>
  
    <p style="font-size:12px;"><strong>By Shape:</strong></p>
    <label style="font-size:12px;">
      <input type="checkbox" name="fl-shape" value="square" id="square" checked /> Square</label>
    <br>
    <label style="font-size:12px;">
      <input type="checkbox" name="fl-shape" value="circle" id="circle" checked /> Circle</label>
    <br>
    <label style="font-size:12px;">
      <input type="checkbox" name="fl-shape" value="triangle" id="triangle" checked /> Triangle</label>
  </form>

</div>



<div class="items">
  <div class="item" data-id="rss" data-category="red small square">red small square</div>
  <div class="item" data-id="yss" data-category="yellow small square">yellow small square</div>
  <div class="item" data-id="gss" data-category="green small square">green small square</div>
  
  <div class="item" data-id="rms" data-category="red medium square">red medium square</div>
  <div class="item" data-id="yms" data-category="yellow medium square">yellow medium square</div>
  <div class="item" data-id="gms" data-category="green medium square">green medium square</div>
  
  <div class="item" data-id="rls" data-category="red large square">red large square</div>
  <div class="item" data-id="yls" data-category="yellow large square">yellow large square</div>
  <div class="item" data-id="gls" data-category="green large square">green large square</div>







  <div class="item" data-id="rsc" data-category="red small circle">red small circle</div>
  <div class="item" data-id="ysc" data-category="yellow small circle">yellow small circle</div>
  <div class="item" data-id="gsc" data-category="green small circle">green small circle</div>
  
  <div class="item" data-id="rmc" data-category="red medium circle">red medium circle</div>
  <div class="item" data-id="ymc" data-category="yellow medium circle">yellow medium circle</div>
  <div class="item" data-id="gmc" data-category="green medium circle">green medium circle</div>
  
  <div class="item" data-id="rlc" data-category="red large circle">red large circle</div>
  <div class="item" data-id="ylc" data-category="yellow large circle">yellow large circle</div>
  <div class="item" data-id="glc" data-category="green large circle">green large circle</div>
  
  
  
  
  
  <div class="item" data-id="rst" data-category="red small triangle">red small triangle</div>
  <div class="item" data-id="yst" data-category="yellow small triangle">yellow small triangle</div>
  <div class="item" data-id="gst" data-category="green small triangle">green small triangle</div>
  
  <div class="item" data-id="rmt" data-category="red medium triangle">red medium triangle</div>
  <div class="item" data-id="ymt" data-category="yellow medium triangle">yellow medium triangle</div>
  <div class="item" data-id="gmt" data-category="green medium triangle">green medium triangle</div>
  
  <div class="item" data-id="rlt" data-category="red large triangle">red large triangle</div>
  <div class="item" data-id="ylt" data-category="yellow large triangle">yellow large triangle</div>
  <div class="item" data-id="glt" data-category="green large triangle">green large triangle</div>  
  



</div>

＆＃13;

使用多个Checkbox进行Jquery过滤

2 个答案:

Here's an example fiddle