基于多个选择和单个选择元素的组合进行过滤

我想按类筛选（显示/隐藏）元素。 我想让5个filter一起工作。

... ... ... ... 

和

 ... 

jQuery的：

 jQuery(document).ready(function ($) { $("select").on("change", function () { var filterVal = $("select#filter4").val(); var filterVal2 = $("select#filter5").val(); var filterVal3 = $("select#filter6").val(); var filterVal4 = $("select#filter7").val(); var filterVal5 = $("select#filter8").val(); var filterSelector = ""; var filter2Selector = ""; var filter3Selector = ""; var filter4Selector = ""; var filter5Selector = ""; if (filterVal == "all" && filterVal2 == "all" && filterVal3 == "all" && filterVal4 == "all" && filterVal5 === null) { //show all items $(".item").fadeIn("fast"); } else { if (filterVal != "all") { filterSelector = "." + filterVal; } if (filterVal2 != "all") { filter2Selector = "." + filterVal2; } if (filterVal3 != "all") { filter3Selector = "." + filterVal3; } if (filterVal4 != "all") { filter4Selector = "." + filterVal4; } if (filterVal5 !== null) { filter5Selector = "." + filterVal5; } $(".item").hide(); $(filterSelector + filter2Selector + filter3Selector + filter4Selector + filter5Selector).fadeIn("fast"); } }); }); 

看看这个jsfiddle的一切 ！

前四个单个filter可以解决任何问题。 当选择多个选项时，第五个多选元素无法正常工作（过滤）。

编辑 ：在全局匹配的g修饰符（/ / g）的帮助下，需要用点（多个css选择器）替换逗号：

 $(filter4Selector + filter5Selector.replace(/,/g, ".")).fadeIn("fast"); 

见http://jsfiddle.net/mahish/dum7n/ 。

下面的答案提供了不同的代码，也可以使用！

Answer 1

清理代码并修复多个查询。 注意：

.class1.class2.class3表示class1 && class2 && class 3

.class1, .class2, .class3表示class1 || class2 || class 3 class1 || class2 || class 3

这是评论中早先混淆的原因。

 jQuery(document).ready(function ($) { var values = [7, 8]; $("select").on("change", function () { var showAll = true, show = [], joined; $.each(values, function (index, id) { var $el = $('#filter' + id), multi = $el.attr('multiple'), val = $el.val(); if (multi) { if (val !== null) { showAll = false; $.each(val, function (i, v) { show.push( v ); }); } } else { if (val != 'all') { showAll = false; show.push( val ); } } }); console.log(showAll); console.log(show); if (showAll) { //show all items $(".item").fadeIn("fast"); } else { joined = '.' + show.join('.'); console.log( joined ); $(".item").hide(); $( joined ).fadeIn("fast"); } }); $.each(values, function (index, id) { $('#filter' + id).chosen(); }); }); 

http://jsfiddle.net/9SZkr/1/

Answer 2

用逗号分隔选择器，这应该工作（谷歌jQuery多选择器以获取更多信息）