Jquery 使用多个复选框进行过滤
Jquery filtering with multiple Checkboxes
对于当前的项目，我正在创建一个简单的产品目录，应该能够通过 Jquery 使用几组复选框进行过滤。
在一组中，当两个或多个复选框被选中时，逻辑应该是“或”，而当使用两组或更多个复选框时，逻辑应该是“与”。
我目前正在使用的一个很好的（有效的）示例可以在这里找到：
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。我也很欣赏完全不同方法的提示，但由于我已经投入了相当多的时间，所以我真的很想以这种方式工作。
您当前的方法不是很动态，选择器和数组是硬编码的，因此每次添加新的过滤器选项时，您都必须添加代码来处理它。
相反，只需将更改处理程序绑定到所有过滤器复选框，您就可以收集它们的值，并按它们各自的名称对它们进行分组，例如：
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 元素与每个命名集中的值匹配，我们 return 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();
Here's an example fiddle
这是来自 billyonecan 的 jsfiddle 的一个分支。差异是...
- 未选中的框表示 属性 已从结果中排除
- 默认选中所有复选框（显示所有结果）
- 必须至少选中每个过滤器组的一个复选框
- 如果过滤器组没有提交过滤器，所有结果都被隐藏
如果添加了新的过滤器组，它将被自动处理
( ( a||b||c ) && ( x||y||z ) && ( 1||2||3 )... )
。 jsFiddle
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();
});
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;
}
<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>
对于当前的项目，我正在创建一个简单的产品目录，应该能够通过 Jquery 使用几组复选框进行过滤。
在一组中，当两个或多个复选框被选中时，逻辑应该是“或”，而当使用两组或更多个复选框时，逻辑应该是“与”。
我目前正在使用的一个很好的（有效的）示例可以在这里找到：
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。我也很欣赏完全不同方法的提示，但由于我已经投入了相当多的时间，所以我真的很想以这种方式工作。
您当前的方法不是很动态，选择器和数组是硬编码的，因此每次添加新的过滤器选项时，您都必须添加代码来处理它。
相反，只需将更改处理程序绑定到所有过滤器复选框，您就可以收集它们的值，并按它们各自的名称对它们进行分组，例如：
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 元素与每个命名集中的值匹配，我们 return 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();
Here's an example fiddle
这是来自 billyonecan 的 jsfiddle 的一个分支。差异是...
- 未选中的框表示 属性 已从结果中排除
- 默认选中所有复选框（显示所有结果）
- 必须至少选中每个过滤器组的一个复选框
- 如果过滤器组没有提交过滤器，所有结果都被隐藏
如果添加了新的过滤器组，它将被自动处理
( ( a||b||c ) && ( x||y||z ) && ( 1||2||3 )... )
。 jsFiddle
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();
});
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;
}
<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>