Question

从这里开始，我现在所掌握的是一个小提琴：link to 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型，成本在100万到200万之间，阳台面积在50-100平方米之间。有4个属性，每个属性都有自己的值，例如有5种不同类型的家庭。

最后，用户必须能够对各种属性和相应值进行一个或多个选择。当用户这样做时，应该过滤可用房屋列表。因此，如果用户正在寻找50-100平方米和100-150平方米之间的住宅，则应检查这两个框并显示相应的结果。

到目前为止，感谢其他帖子中的一些有用的答案，我已经让它一次过滤一个属性的列表。

如果你看小提琴，你会看到如果你勾选50-100平方米的盒子，它会正确过滤，只显示与过滤器匹配的家。如果您选中“Urban”框，则会进一步过滤结果，只显示2个结果。取消选中所有框将按预期返回原始列表。

现在，如果我选择50-100m2和100-150m2，结果为空。我希望得到12个结果（前者为6个，后者为6个）。在这些结果中，用户应该能够再次检查/选择其他属性，以便在结果列表中进一步向下钻取。

问题是，如何让它按预期工作？我正在做什么，即使在正确的轨道上，如果是这样，我在这里错过了什么？

感谢您的任何答案！

Answer 1

不要在.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(','));
    }
})

Answer 2

检查出来

$(document).ready(function(){
     $('#aptresults div').show();

     $('input[type="checkbox"]').click(function(){
         select()
     })
 });

function select()
{
    $('#aptresults div').hide();

    var $div=$('#aptresults div');
    var check=false;
    var css= [];    
    $('input[type="checkbox"]:checked').each(function(){       
            css.push("."+$(this).val());            
    })
    if(css.length>=1){
        $div=$div.filter(css.toString());              
        check=true;
    }
    if(check==true || check==false) $div.show();
}

使用值和类

2 个答案: