首先，这是我现在所拥有的一些东西：链接到 JSFiddle，代码如下：
<!DOCTYPE html>
<head>
<title>Homes Selection Tester</title>
<style>
body {width: 100%;}
#wrapper {width: 640px;overflow: auto;}
ul li {list-style-type: none;}
#aptresults {width: 300px;float: left;}
#selections {width: 330px;float: left;}
</style>
</head>
<body>
<div id="wrapper">
<div id="content">
<div id="heading">
<h1 class="inline">Homes</h1>
</div>
<div id="selections">
<b>Oppervlakte</b>
<ul class="apt-opper">
<li >
<input type="checkbox" value="o50" />
<label for="o50">50m2 - 100m2</label>
</li>
<li >
<input type="checkbox" value="o100" />
<label for="o100">100m2 - 150m2</label>
</li>
<li >
<input type="checkbox" value="o150" />
<label for="o150">150m2 - 200m2</label>
</li>
<li >
<input type="checkbox" value="o200" />
<label for="o200">200m2 +</label>
</li>
</ul>
<b>Type</b>
<ul class="apt-type">
<li >
<input type="checkbox" value="tPe" />
<label for="tPe">Penthouse</label>
</li>
<li >
<input type="checkbox" value="tV" />
<label for="tV">Villa</label>
</li>
<li >
<input type="checkbox" value="tPa" />
<label for="tPa">Panorama</label>
</li>
<li >
<input type="checkbox" value="tU" />
<label for="tU">Urban</label>
</li>
<li >
<input type="checkbox" value="tZ" />
<label for="tZ">Zuid</label>
</li>
</ul>
<b>Prijs</b>
<ul class="apt-price">
<li >
<input type="checkbox" value="p1" />
<label for="p1">1.000.000 - 2.000.000</label>
</li>
<li >
<input type="checkbox" value="p2" />
<label for="p2">2.000.000 - 3.000.000</label>
</li>
<li >
<input type="checkbox" value="p3" />
<label for="p3">3.000.000 - 4.000.000</label>
</li>
<li >
<input type="checkbox" value="p4" />
<label for="p4">4.000.000 - 5.000.000</label>
</li>
</ul>
<b>Balkon</b>
<ul class="apt-balkon">
<li >
<input type="checkbox" value="b50" />
<label for="b50">50m2 - 100m2</label>
</li>
<li >
<input type="checkbox" value="b100" />
<label for="b100">100m2 - 150m2</label>
</li>
<li >
<input type="checkbox" value="b150" />
<label for="b150">150m2 - 200m2</label>
</li>
<li >
<input type="checkbox" value="b200" />
<label for="b200">200m2 +</label>
</li>
</ul>
</div>
<div id="aptresults">
<div class="o50 tU p1 b50">50m2 - Urban - 1mil - 50m2 balkon</div>
<div class="o100 tZ p2 b100">100m2 - Zuid - 2mil - 100m2 balkon</div>
<div class="o150 tV p3 b150">150m2 - Villa - 3mil - 150m2 balkon</div>
<div class="o200 tPa p4 b200">200m2 - Panorama - 4mil - 200m2 balkon</div>
<div class="o50 tPe p1 b50">50m2 - Penthouse - 1mil - 50m2 balkon</div>
<div class="o100 tU p2 b100">100m2 - Urban - 2mil - 100m2 balkon</div>
<div class="o150 tV p3 b150">150m2 - Villa - 3mil - 150m2 balkon</div>
<div class="o200 tZ p4 b200">200m2 - Zuid - 4mil - 200m2 balkon</div>
<div class="o50 tPe p3 b50">50m2 - Penthouse - 3mil - 50m2 balkon</div>
<div class="o100 tU p2 b100">100m2 - Urban - 2mil - 100m2 balkon</div>
<div class="o50 tU p1 b50">50m2 - Urban - 1mil - 50m2 balkon</div>
<div class="o100 tZ p2 b100">100m2 - Zuid - 2mil - 100m2 balkon</div>
<div class="o150 tV p3 b150">150m2 - Villa - 3mil - 150m2 balkon</div>
<div class="o200 tPa p4 b200">200m2 - Panorama - 4mil - 200m2 balkon</div>
<div class="o50 tPe p1 b50">50m2 - Penthouse - 1mil - 50m2 balkon</div>
<div class="o100 tU p2 b100">100m2 - Urban - 2mil - 100m2 balkon</div>
<div class="o150 tV p3 b150">150m2 - Villa - 3mil - 150m2 balkon</div>
<div class="o200 tZ p4 b200">200m2 - Zuid - 4mil - 200m2 balkon</div>
<div class="o50 tZ p3 b150">50m2 - Zuid - 3mil - 150m2 balkon</div>
<div class="o100 tU p2 b100">100m2 - Urban - 2mil - 100m2 balkon</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#aptresults div').show();
$('input[type="checkbox"]').click(function(){
select()
})
});
function select()
{
$('#aptresults div').hide();
var $div=$('#aptresults div');
var check=false;
$('input[type="checkbox"]:checked').each(function(){
var css=$(this).val();
$div=$div.filter('.'+css);
check=true;
})
if(check==true || check==false) $div.show();
}
</script>
</body>
</html>
基本上我有一个家庭列表，每个家庭的属性分为不同的类别。例如，一套房屋面积在 50-100 平方米之间，属于 X 型，价格在 1 到 200 万之间，有一个阳台，面积在 50-100 平方米之间。
有 4 个属性，每个属性都有自己的值，例如有 5 种不同类型的房屋。
最后，用户必须能够对各种属性和相应的值进行一项或多项选择。当用户这样做时，应过滤可用房屋的列表。例如，假设用户正在寻找 50-100 平方米和 100-150 平方米之间的房屋，则应选中两个复选框并显示相应的结果。
到目前为止，由于其他帖子中的一些有用答案，我已经可以一次过滤列表中的一个属性。
如果您查看小提琴，您会发现如果选中 50-100m2 的框，它会正确过滤，并且仅显示与过滤器匹配的房屋。如果您随后选中“城市”复选框，系统会进一步过滤结果，并且仅显示 2 个结果。取消选中所有框将按预期返回原始列表。
现在，如果我选择 50-100m2 和 100-150m2，结果为空。我希望得到 12 个结果（前者 6 个，后者 6 个）。在这些结果中，用户还应该能够检查/选择其他属性，以便在结果列表中进一步深入。
问题是，我怎样才能让它按预期工作？我正在做的事情是否在正确的轨道上？如果是的话，我在这里错过了什么？
感谢您可能得到的任何答案！
不要在 .each-loop 中覆盖 $div，而是收集要过滤的 css 类并在单个过滤器操作中过滤所有项目，如下所示：
$('input[type="checkbox"]:checked').each(function(){
var css=$(this).val();
filter.push('.'+css);
})
$div.filter(filter.join(',')).show();
完全摆弄https://jsfiddle.net/9zxrby22/1/
请注意它如何作为 OR 过滤器工作，甚至跨不同的组（oppervlakte、type、prijs 等）。如果任何类匹配，则会显示该项目，这可能不是您想要的。
如果您想要跨组进行 AND 过滤，请循环遍历分组复选框并覆盖 $div 变量，如下所示：https://jsfiddle.net/9zxrby22/2/
$('ul').each(function()
{
filter = [];
check = false;
$(this).find('input[type="checkbox"]:checked').each(function()
{
var css=$(this).val();
filter.push('.'+css);
check = true;
});
if (check)
{
$div = $div.filter(filter.join(','));
}
})
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
