Question

我无法绕过这里的逻辑。

我的JQuery：

    <script>
    $(document).ready(function () {
        $('div.filter-groups').find('input:checkbox').live('click', function () {
            $('.general').hide();
            $('div.filter-groups').find('input:checked').each(function () {
                $('.general').hide();
                $('div.general.' + $(this).attr('rel')).show();
            });
        });
    });</script>

我的复选框：

    <div class="filter-groups">
                            <div class="filter-label">Price:</div>
                            <div class="filter"><input type="checkbox" name="price" value="" rel="Tier1">$100,000-$160,000</div>
                            <div class="filter"><input type="checkbox" name="price" value="" rel="Tier2">$160,000-$200,000</div>
                            <div class="filter"><input type="checkbox" name="price" value="" rel="Tier3">$200,000-$250,000</div>
                            <div class="filter-label">Number Of Rooms:</div>
                            <div class="filter"><input type="checkbox" name="price" value="" rel="Rooms3">3 Bedroom</div>
                            <div class="filter"><input type="checkbox" name="price" value="" rel="Rooms4">4 Bedroom</div>
                            <div class="filter"><input type="checkbox" name="price" value="" rel="Rooms5">5 Bedroom</div>
                            <div class="filter-label">Square Footage:</div>
                            <div class="filter"><input type="checkbox" name="price" value="" rel="Foot1">1,200-1,600</div>
                            <div class="filter"><input type="checkbox" name="price" value="" rel="Foot2">1,600-2,000</div>
                            <div class="filter"><input type="checkbox" name="price" value="" rel="Foot3">2,000+</div>
                            <div class="filter-label">Neighborhoods:</div>
                            <div class="filter"><input type="checkbox" name="price" value="" rel="CityView">City View</div>
                            <div class="filter"><input type="checkbox" name="price" value="" rel="HeritageHills">Heritage Hills</div>
                            <div class="filter"><input type="checkbox" name="price" value="" rel="HillsideTerrace">Hillside Terrace</div>
                            <div class="filter"><input type="checkbox" name="price" value="" rel="LonesomeDove">Lonesome Dove</div>
                            <div class="filter"><input type="checkbox" name="price" value="" rel="Tradewinds">Tradewinds</div>
                        </div>

该脚本的作用是，如果单击一个复选框，它将显示包含与该复选框的“rel =”匹配的类的div。

这样做除了如果我检查第一个价格过滤器和第一个邻居过滤器，它将显示该邻域中的房屋，即使它属于第二个价格过滤器。

我需要此脚本在显示结果时考虑所有过滤器部分。这个问题已被问过几次，但他们对任何建议使用不同的方法？

jsfiddle我无法让我的工作代码工作： http://jsfiddle.net/jonathanSumner90/nh8vr1kp/

它工作的网页，但不是我想弄清楚的方式：

http://www.bluehavenhomes.com/floor-plans?hs_preview=1SQuQUzB-2347415373

Answer 1

jQuery中已经有一个名为.filter()的内置函数，可以实现您想要实现的功能。

var checkboxes = $('div.filter-groups').find('input:checkbox'),
    general = $('.general');

function filterCheckboxes(ev){
    var rel = $(ev.currentTarget).attr('rel');

    general.hide().filter('.' + rel).show();
}

checkboxes.on('click', filterCheckboxes);

要解决多个选中的复选框问题，您可以过滤所有:checked中的checkboxes状态，并为每个rel应用过滤器。

function filterCheckboxes(){
    var checked = checkboxes.filter(':checked');

    general.hide();
    $.each(checked, function(){
        var rel = $(this).attr('rel');

        general.filter('.' + rel).show();
    });
}

希望这是预期的。

<强> DEMO

建议提示：使用data-属性代替rel更具表现力和/或在单个复选框上组合多个过滤器。

<强> HTML

<input type="checkbox" name="price" value="" data-filter="Tier1" />

<强> JS

var rel = $(this).data('filter');

Jquery过滤多个类别的逻辑

1 个答案: