使用值和类基于基于jQuery的复选框过滤结果 [英] Filtering result based on checkboxes with jQuery using value and class
问题描述
首先，这是我现在所掌握的东西:链接到JSFiddle ，下面的代码:
To start off with here's a fiddle of what I have right now: link to JSFiddle, code below:
<!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种不同类型的房屋.
Basically I have a list of homes, with the attributes of each home as various classes. For instance, a home will be between 50-100m2, be of type X, cost between 1 to 2 million, and have a balcony between 50-100m2.
There are 4 attributes, each with their own values, for instance there are 5 different types of home.
最后，用户必须能够对各种属性和相应的值进行一个或多个选择.当用户这样做时，应筛选可用房屋列表.因此，假设用户正在寻找50-100平方米至100-150平方米之间的房屋，则应同时选中两个框并显示相应的结果.
In the end, the user must be able to make one or more selection(s) of the various attributes and corresponding values. When the user does so, the list of available homes should be filtered. So say a user is looking for a home between 50-100m2, and 100-150m2, both boxes should be checked and the corresponding results should be displayed.
到目前为止，由于在其他帖子中提供了一些有用的答案，我得到了它一次可以为1个属性过滤列表.
So far, thanks to some helpful answers in other posts, I've gotten it to filter the list for 1 of the attributes at a time.
如果您看小提琴，您会看到，如果选中50-100平方米的框，它会正确过滤，并且只会显示与过滤器匹配的房屋.如果您随后选中城市"复选框，则结果将被进一步过滤，并且仅显示2个结果.取消选中所有框将按预期返回原始列表.
If you look at the fiddle, you'll see that if you check the box for 50-100m2, it filters correctly and only shows homes that match the filter. If you then check the box for 'Urban', the results are filtered further and only 2 results are shown. Unchecking all boxes returns the original list, as intended.
现在，如果我选择50-100m2和100-150m2，则结果为空.我希望能得到12个结果(前者6个，后者6个).在这些结果中，用户还应该能够再次检查/选择其他属性，以进一步在结果列表中进行深入研究.
Now if I select 50-100m2 and 100-150m2, the results are empty. I would expect to get 12 results back (6 for the former, and 6 for the latter selection). Within those results a user should again be able to check/select other attributes as well, to drill down even further in the results list.
问题是，如何使它按预期工作?即使在正确的轨道上，我也在做什么?如果是这样，我在这里错过了什么?
Question is, how can I get this to work as intended? Is what I'm doing even on the right track, and if so, what am I missing here?
感谢您可能提出的所有答案！
Appreciate any answers you might have!
推荐答案
而不是覆盖.each循环中的$ div，而是收集要过滤的css类，并在单个过滤器操作中过滤所有项目，如下所示:
Instead of overwriting $div within the .each-loop, collect the css classes you want to filter by and filter all items in a single filter action, like so:
$('input[type="checkbox"]:checked').each(function(){
var css=$(this).val();
filter.push('.'+css);
})
$div.filter(filter.join(',')).show();
在
请注意，即使在不同的组(oppervlakte，类型，prijs等)中，它也可以用作OR过滤器.如果有任何类匹配，则显示该项目，这可能不是您想要的.
Notice how this works as an OR-filter, even accross different groups (oppervlakte, type, prijs etc). If any class matches, the item is displayed, which is probably not what you want.
如果您希望组之间有AND过滤器，请遍历已分组的复选框并覆盖$ div变量，如下所示:
If you want to have an AND-filter accross groups, loop over the grouped checkboxes and overwrite the $div variable like so: 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(','));
}
})
这篇关于使用值和类基于基于jQuery的复选框过滤结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
