jQuery多个复选框过滤 [英] Jquery multiple checkbox filtering
问题描述
我有三组复选框，这些复选框使我可以基于数据属性过滤多个div.这很好用，但不是我需要的.
I have three sets of checkboxes which allow me to filter a number of divs based on data attributes. This works great but not as I need it to.
如果您访问下面的 jsfiddle ，您将看到一个有效的测试.
If you visit the jsfiddle below you will see a working test.
我需要做的是:
-
在同一类别中选择多个选项时，例如小"和中"，它应该增加结果，即显示所有小"和中"结果(目前是这样做的).
When more than one option is chosen within the same category e.g. 'small' and 'medium', it should increase the results i.e. show all 'small' and 'medium' results, (which is what it does at the moment).
在不同类别中选择多个选项时，例如中"和北美洲"，应减少结果，即显示北美洲"中的所有中"花
When more than one option is chosen within different categories e.g. 'medium' and 'north america' it should reduce the results i.e. show all 'medium' flowers in 'north america'
请问如何修正/修改我的代码以使其正常工作? (我希望这是有道理的.)
How would I go about fixing/amending my code to make this work please? (I hope this makes sense).
下面是我正在使用的jquery:
Below is the jquery I'm using:
$('.flowers-wrap, .continents-wrap').delegate('input[type=checkbox]', 'change', function() {
var $lis = $('.flowers > div'),
$checked = $('input:checked');
if ($checked.length) {
var selector = '';
$($checked).each(function(index, element){
if(selector === '') {
selector += "[data-category~='" + element.id + "']";
} else {
selector += ",[data-category~='" + element.id + "']";
}
});
$lis.hide();
console.log(selector);
$('.flowers > div').filter(selector).show();
} else {
$lis.show();
}
});
请参阅我设置的jsfiddle来演示我遇到的问题- http://jsfiddle.net/n3EmN /
Please see the jsfiddle I have setup to demonstrate the issue I'm having - http://jsfiddle.net/n3EmN/
推荐答案
非常感谢Pho3nixHun的帮助:)
Many thanks to Pho3nixHun for his help :)
这是我自己的答案:( jsfiddle在这里).
Here is my own answer: (jsfiddle here).
$(document).ready(function() {
var byProperty = [], byColor = [], byLocation = [];
$("input[name=fl-colour]").on( "change", function() {
if (this.checked) byProperty.push("[data-category~='" + $(this).attr("value") + "']");
else removeA(byProperty, "[data-category~='" + $(this).attr("value") + "']");
});
$("input[name=fl-size]").on( "change", function() {
if (this.checked) byColor.push("[data-category~='" + $(this).attr("value") + "']");
else removeA(byColor, "[data-category~='" + $(this).attr("value") + "']");
});
$("input[name=fl-cont]").on( "change", function() {
if (this.checked) byLocation.push("[data-category~='" + $(this).attr("value") + "']");
else removeA(byLocation, "[data-category~='" + $(this).attr("value") + "']");
});
$("input").on( "change", function() {
var str = "Include items \n";
var selector = '', cselector = '', nselector = '';
var $lis = $('.flowers > div'),
$checked = $('input:checked');
if ($checked.length) {
if (byProperty.length) {
if (str == "Include items \n") {
str += " " + "with (" + byProperty.join(',') + ")\n";
$($('input[name=fl-colour]:checked')).each(function(index, byProperty){
if(selector === '') {
selector += "[data-category~='" + byProperty.id + "']";
} else {
selector += ",[data-category~='" + byProperty.id + "']";
}
});
} else {
str += " AND " + "with (" + byProperty.join(' OR ') + ")\n";
$($('input[name=fl-size]:checked')).each(function(index, byProperty){
selector += "[data-category~='" + byProperty.id + "']";
});
}
}
if (byColor.length) {
if (str == "Include items \n") {
str += " " + "with (" + byColor.join(' OR ') + ")\n";
$($('input[name=fl-size]:checked')).each(function(index, byColor){
if(selector === '') {
selector += "[data-category~='" + byColor.id + "']";
} else {
selector += ",[data-category~='" + byColor.id + "']";
}
});
} else {
str += " AND " + "with (" + byColor.join(' OR ') + ")\n";
$($('input[name=fl-size]:checked')).each(function(index, byColor){
if(cselector === '') {
cselector += "[data-category~='" + byColor.id + "']";
} else {
cselector += ",[data-category~='" + byColor.id + "']";
}
});
}
}
if (byLocation.length) {
if (str == "Include items \n") {
str += " " + "with (" + byLocation.join(' OR ') + ")\n";
$($('input[name=fl-cont]:checked')).each(function(index, byLocation){
if(selector === '') {
selector += "[data-category~='" + byLocation.id + "']";
} else {
selector += ",[data-category~='" + byLocation.id + "']";
}
});
} else {
str += " AND " + "with (" + byLocation.join(' OR ') + ")\n";
$($('input[name=fl-cont]:checked')).each(function(index, byLocation){
if(nselector === '') {
nselector += "[data-category~='" + byLocation.id + "']";
} else {
nselector += ",[data-category~='" + byLocation.id + "']";
}
});
}
}
$lis.hide();
console.log(selector);
console.log(cselector);
console.log(nselector);
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();
}
} else {
$lis.show();
}
$("#result").html(str);
});
function removeA(arr) {
var what, a = arguments, L = a.length, ax;
while (L > 1 && arr.length) {
what = a[--L];
while ((ax= arr.indexOf(what)) !== -1) {
arr.splice(ax, 1);
}
}
return arr;
}
});
这篇关于jQuery多个复选框过滤的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
