jQuery UI Slider和Checkbox来过滤div组

Question

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

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

在每个复选框上单击，如果div与所需参数不匹配，则会隐藏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>

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

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

反之亦然 - 我设置了一个价格支架，它确定了，然后我检查开发和卧室，它忽略了价格范围。

任何帮助都会很棒......

Answer 1

我已经采用了稍微不同的方法来解决您的示例如何工作，从而大大简化了代码。

如果您有一个存储搜索状态的对象，那么每次勾选/取消选中复选框并且滑块更新时，您就可以运行搜索功能。为每个绘图添加数据位置和数据卧室属性也使得过滤更容易，而不是依赖于类名。

请参阅此处的完整工作示例：
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);

};

Answer 2

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

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

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

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

有一个错误，然后再次消失，但我会让你处理那个; - ）