Jquery多个复选框过滤

我有三组复选框，允许我根据数据属性过滤多个div。 这很好但不是我需要的。

如果您访问下面的jsfiddle ，您将看到一个工作测试。

我需要它做的是：

1. 当在同一类别中选择多个选项时，例如“小”和“中”，它应该增加结果，即显示所有“小”和“中”结果（这是它目前所做的）。

2. 如果在不同类别中选择多个选项，例如“中等”和“北美”，则应该减少结果，即显示“北美”中的所有“中等”花朵

我将如何修复/修改我的代码以使其成功？ （我希望这是有道理的）。

下面是我正在使用的jquery：

$('.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/

Answer 1

非常感谢Pho3nixHun的帮助:)

这是我自己的答案:(这里是jsfiddle ）。

 $(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; } }); 

Answer 2

你应该在过滤它们之前隐藏它们并在之后显示它们，在.filter(selector)之前添加一个.filter(selector) 。 像这样：

 $('.flowers > div').hide().filter(selector).show(); 

这应隐藏所有元素，然后显示所选元素。

DEMO