用于过滤 div 集的 jQuery UI 滑块和复选框答案

【问题标题】：jQuery UI Slider and Checkbox to filter set of divs用于过滤 div 集的 jQuery UI 滑块和复选框
【发布时间】：2014-03-26 17:38:45
【问题描述】：

我在这里遇到了 jquery 的问题。

我正在运行一个 ajax 调用来返回一个 SQL 查询。它基本上显示了一个属性列表，每个属性都有一个由开发名称、卧室数量组成的类名称，以及它是否匹配或不匹配取决于是否匹配复选框值。

点击每个复选框时，如果 div 与所需参数不匹配，则会隐藏它们。

工作演示：http://jsfiddle.net/cactuscreative/2PM8H/4/

jQuery

                $(function() {
                    $('#slider-range').slider({
                        range: true,
                        min: 0,
                        max: 700000,
                        step: 5000,
                        values: [ 25000, 550000 ],
                        slide: function(event, ui) {
                            $( "#price_range" ).val( "£" + ui.values[ 0 ] + " - £" + ui.values[ 1 ] );
                        }, 
                        stop: function(event, ui) {
                            mi = ui.values[ 0 ];
                            mx = ui.values[ 1 ];
                            filterSystem(mi, mx);
                        }
                    });
                    $( "#price_range" ).val( "£" + $( "#slider-range" ).slider( "values", 0 ) + " - £" + $( "#slider-range" ).slider( "values", 1 ) );
                });

                function filterSystem(minPrice, maxPrice) {
                    $("div.plotresult").filter(function() {
                        var price = parseInt($(this).data("price"));
                        if (isNaN(price)) { price = '0'; }
                        console.log(price);
                        $("div.plotresult").hide();
                        $("div.plotresult").removeClass('match').addClass('nomatch');
                        return price > minPrice && price < maxPrice;
                    }).show();
                }

                $(".filter:checkbox").bind('change',function () {
                    $("div.plotresult").hide();
                    $("div.plotresult").removeClass('match').addClass('nomatch');
                    $("div#overlay").show();

                    var locationArray = [];
                    var bedroomArray = [];

                    var location_Count = 0, bedroom_Count = 0;

                    $("#location :checkbox:checked").each(function () {
                        locationArray[location_Count] = $(this).val();
                        location_Count++
                    });

                    $("#bedroom :checkbox:checked").each(function () {
                        bedroomArray[bedroom_Count] = $(this).val();
                        bedroom_Count++
                    });

                    var locationstring
                    var bedroonstring

                    var locationchecked = false
                    var bedroomchecked = false

                    if (bedroom_Count == 0) { bedroom_Count = 1; } else { bedroomchecked = true; }
                    if (location_Count == 0) { location_Count = 1; } else { locationchecked = true; }

                    for (f2 = 0; f2 < location_Count; f2++) {
                        if (locationArray[f2] != null) { locationstring = '.' + locationArray[f2] } else { locationstring = '' }
                    }

                    for (f3 = 0; f3 < bedroom_Count; f3++) {
                        if (bedroomArray[f3] != null) { bedroomstring = '.' + bedroomArray[f3] } else { bedroomstring = '' }
                    }

                    var QueryString = locationstring + bedroomstring

                    $(QueryString).removeClass('nomatch').addClass('match').fadeIn('slow');

                    if (!locationchecked && !bedroomchecked) {
                        $("div.plotresult").removeClass('nomatch').addClass('match').fadeIn('slow');
                    };

                    var mycount = $('.match').length;
                    $(".totalRes").text(mycount);
                });                     

                $('a.showall').click(function () {
                    $("div.plotresult").removeClass('nomatch').addClass('match').fadeIn('slow');
                    $("#price :checkbox").removeAttr('checked');
                    $("#location :checkbox").removeAttr('checked');
                    $("#price :checkbox").removeAttr('checked');
                    var mycount = $('.match').length;
                    $(".totalRes").text(mycount);
                    return false;
                });

过滤器

                <div class="searchfields">
                    <div class="wrapper">
                        <div id="filters">
                            <div class="locations" id="location">
                                <h3>Location</h3>
                                <div class="cumboptions checks">
                                    <p><input type="checkbox" id="cumbria" /> <label><strong>Cumbria</strong></label></p>
                                    <p><input type="checkbox" class="filter" name="location" id="CumbridgeDrive" value="cambridgedrive" /> <label>Cambridge Drive, Penrith</label></p>  
                                    <p><input type="checkbox" class="filter" name="location" id="HawksdalePastures" value="hawksdalepastures" /> <label>Hawksdale Pastures, Dalston</label></p>
                                    <p><input type="checkbox" class="filter" name="location" id="CraggClose" value="craggclose" /> <label>Cragg Close, Kendal</label></p>   
                                    <p><input type="checkbox" class="filter" name="location" id="MastersGrange" value="mastersgrange" /> <label>Masters’ Grange, Kirkby Lonsdale</label></p>
                                    <p><input type="checkbox" class="filter" name="location" id="Pengarth" value="pengarth" /> <label>Pengarth, Grange-over-Sands</label></p>
                                </div>

                                <div class="yorkoptions checks">
                                    <p><input type="checkbox" id="yorkshire" /> <label><strong>North Yorkshire</strong></label></p>
                                    <p><input type="checkbox" class="filter" name="location" id="ImperialCourt" value="imperialcourt" /> <label>Imperial Court, Ingleton</label></p>
                                    <p><input type="checkbox" class="filter" name="location" id="OldLaundryMews" value="oldlaundrymews" /> <label>Old Laundry Mews, Ingleton</label></p>
                                </div>
                            </div>

                            <div class="rooms" id="bedroom">
                                <h3>Number of Bedrooms</h3>
                                <div class="options bedrooms">
                                    <p><input type="checkbox" class="filter" name="bedroom" id="one" value="one" /> <label>1</label></p>
                                    <p><input type="checkbox" class="filter" name="bedroom" id="two" value="two" /> <label>2</label></p>
                                    <p><input type="checkbox" class="filter" name="bedroom" id="three" value="three" /> <label>3</label></p>
                                    <p><input type="checkbox" class="filter" name="bedroom" id="four" value="four" /> <label>4</label></p>
                                    <p><input type="checkbox" class="filter" name="bedroom" id="four" value="five" /> <label>5</label></p>
                                </div>
                            </div>

                            <div class="prices" id="price">
                                <h3>Price (£)</h3>
                                <div class="options">
                                    <input type="text" id="price_range" class="price_range" value="" />
                                    <div id="slider-range"></div>
                                </div>
                            </div>
                            <p><a class="showall" href="#">Clear Filters</a></p>

                        </div>
                    </div>
                </div>

结果：

<div id="result">
    <h4 class="countresults"><span class="totalRes">6</span> properties match your result</h4>

<div class="plot plotresult mastersgrange three" data-price="0">
    <img src="http://placehold.it/1600x620" width="100%" />
    <p class="meta">Masters Grange Plot 26</p>
     <h3>3 Bedroom Detached House</h3>

    <p class="info"></p>
    <ul>
        <li class="price">£TBC</li>
        <li class="rooms">3 Bedrooms</li>
    </ul>
</div>
<div class="plot plotresult cambridgedrive four" data-price="395000">
    <img src="http://placehold.it/1600x620" width="100%" />
    <p class="meta">Cambridge Drive Plot 34</p>
     <h3>4 Bedroom Detached House</h3>

    <p class="info"></p>
    <ul>
        <li class="price">£395000</li>
        <li class="rooms">4 Bedrooms</li>
    </ul>
</div>
<div class="plot plotresult craggclose two" data-price="250000">
    <img src="http://placehold.it/1600x620" width="100%" />
    <p class="meta">Cragg Close Plot 18</p>
     <h3>2 Bedroom Detached House</h3>

    <p class="info"></p>
    <ul>
        <li class="price">£250000</li>
        <li class="rooms">2 Bedrooms</li>
    </ul>
</div>
<div class="plot plotresult pengarth three" data-price="0">
    <img src="http://placehold.it/1600x620" width="100%" />
    <p class="meta">Pengarth Plot 8</p>
     <h3>2 Bedroom Detached House</h3>

    <p class="info"></p>
    <ul>
        <li class="price">£TBC</li>
        <li class="rooms">3 Bedrooms</li>
    </ul>
</div>
<div class="plot plotresult pengarth three" data-price="250000">
    <img src="http://placehold.it/1600x620" width="100%" />
    <p class="meta">Pengarth Plot 10</p>
     <h3>3 Bedroom Detached House</h3>

    <p class="info"></p>
    <ul>
        <li class="price">£250000</li>
        <li class="rooms">3 Bedrooms</li>
    </ul>
</div>
<div class="plot plotresult hawksdalepastures four" data-price="550000">
    <img src="http://placehold.it/1600x620" width="100%" />
    <p class="meta">hawksdalepastures Plot 65</p>
     <h3>4 Bedroom Detached House</h3>

    <p class="info"></p>
    <ul>
        <li class="price">£550000</li>
        <li class="rooms">4 Bedrooms</li>
    </ul>
</div>

我的问题是他们不一起玩。

它们作为单独的过滤器工作，但如果我想检查开发和卧室，然后在价格范围之间检查，那么它会忽略复选框。

反之亦然 - 我设置了一个价格范围并且没问题，然后我检查了一个开发和卧室，它忽略了价格范围。

任何帮助都会很棒...

【问题讨论】：

很好的问题，name="bedroom" id="four" value="five" 你有两个“四个” id，这可能是个问题。在解决这个问题并遇到困难后试图打破你的小提琴......似乎对我来说很好。 .
你确定吗？我知道他们独立工作，但我希望他们一起工作。选择开发，然后选择价格。我还注意到滑块不会更新找到的属性数量，这有助于更好地展示问题。
更新小提琴：jsfiddle.net/cactuscreative/2PM8H/4

标签： javascript php jquery jquery-ui

【解决方案1】：

对于您的示例的工作方式，我采用了一种稍微不同的方法，这大大简化了代码。

如果您有一个对象来存储搜索状态，那么您可以在每次勾选/取消勾选复选框并且滑块更新时运行搜索功能。为每个绘图添加 data-location 和 data-bedrooms 属性也使过滤变得更容易，而不是依赖于类名。

在此处查看完整的工作示例：
http://jsfiddle.net/77ZLC/

它的一般要点是这样的：

// store search state
var search = {
    minPrice: 25000, 
    maxPrice: 550000,
    locations: [],
    bedrooms: []
};

/**
 * Do a search and update results
 */
function doSearch() {

    var numResults = 0;

    $('.plotresult').each(function(el) {

        $el = $(this);

        var location = $el.data('location');
        var bedrooms = $el.data('bedrooms');
        var price = $el.data('price');

        var show = true;

        // check locations
        if (search.locations.length > 0 && $.inArray(location, search.locations) === -1) {
            show = false;
        }

        // check bedrooms
        if (search.bedrooms.length > 0 && $.inArray(bedrooms, search.bedrooms) === -1) {
            show = false;
        }

        // check price
        var price = parseInt(price, 10) || 0;
        if (price < search.minPrice || price > search.maxPrice) {
            show = false;
        }

        if (show) {
            numResults++;
            $el.removeClass('nomatch').addClass('match');
        }
        else {
            $el.removeClass('match').addClass('nomatch');
        }

    });

    // show/hide results
    $('.match').fadeIn();
    $('.nomatch').fadeOut();

    // update total
    $('.totalRes').text(numResults);

};

【讨论】：

太棒了——这也太接近了。似乎在我的网站上不起作用，但我让我精神抖擞。清除过滤器可以正常工作，但不能检查框？为什么它会在小提琴上而不是在我的网站上工作。我已经检查过了，似乎没有任何冲突，控制台上也没有错误。

【解决方案2】：

这是您可以做到的一种方法。您需要将所有过滤器添加到一个地方运行，这样您就可以在触发事件时将额外的参数传递给它：

http://jsfiddle.net/ahallicks/2PM8H/8/

在此示例中，我更改了您的过滤器功能以触发复选框的更改事件，因此运行当前选择的过滤器，并在最后添加我自己的过滤器：


function filterSystem(minPrice, maxPrice) {
    $(".filter:checkbox").trigger("change", [minPrice,maxPrice]);
}

淡入再淡出有点问题，但我会让你处理那个;-)

【讨论】：