Javascript 使用值和类使用jQuery基于复选框筛选结果_Javascript_Jquery

Javascript 使用值和类使用jQuery基于复选框筛选结果

javascript jquery

Javascript 使用值和类使用jQuery基于复选框筛选结果,javascript,jquery,Javascript,Jquery,首先，这里是我现在拥有的一把小提琴，代码如下： <!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:

首先，这里是我现在拥有的一把小提琴，代码如下：

<!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平方米的复选框，它会正确过滤，并且只显示与过滤匹配的房屋。如果选中“市区”复选框，则会进一步过滤结果，只显示2个结果。取消选中所有框将按预期返回原始列表

现在如果我选择50-100m2和100-150m2，结果是空的。我希望得到12个结果，前一个6个，后一个6个。在这些结果中，用户还应该能够检查/选择其他属性，以便在结果列表中进一步深入

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

感谢您的回答

不要在.each循环中覆盖$div，而是收集要筛选的css类，并在单个筛选操作中筛选所有项，如下所示：

$('input[type="checkbox"]:checked').each(function(){
        var css=$(this).val();
        filter.push('.'+css);
})

$div.filter(filter.join(',')).show();

全神贯注

请注意，这是一个OR过滤器，甚至可以跨不同组访问OpperLakte、type、prijs等。如果有任何类匹配，则会显示该项，这可能不是您想要的

如果要使用和筛选器accross group，请在分组复选框上循环并覆盖$div变量，如下所示：

$('input[type="checkbox"]:checked').each(function(){
        var css=$(this).val();
        filter.push('.'+css);
})

$div.filter(filter.join(',')).show();

看看这个

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

为什么要使用类来选择？为什么每个类都有一个div？为什么不使用$.ajax来加载json和数据，然后对其进行过滤并在las draw？如果check==true | | check==false$div.show？这似乎没用。如果我错了，请纠正我，但在你的小提琴上，如果我同时选择50平方米和100平方米，它不会显示任何结果吗？@Frits感谢注意，没有粘贴到正确的小提琴上link@ryushe更新和筛选accross组的答案您上次使用和筛选的解决方案正是我想要的。非常感谢你的帮助，我已经把你的答案标记为接受。