组合多个 jquery 过滤器（UI 滑块、复选框）

Question

我想要一个显示一堆 div 的页面，显示的 div 将基于页面上的选择。

这里我使用了两种类型的过滤器，即 jQuery ui slider(price range) 和 checkbox

两者都可以正常工作，但我想将两者结合起来

我找不到同时结合两个过滤器的技巧

小提琴： Working Demo

HTML

<div id="slider-container">
 <p>
  <input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" />
</p>
</div>

<ul id="filters">
    <li>
        <input type="checkbox" value="categorya" id="filter-categorya" />
        <label for="filter-categorya">Category A</label>
    </li>
    <li>
        <input type="checkbox" value="categoryb" id="filter-categoryb" />
        <label for="filter-categoryb">Category B</label>
    </li>
</ul>

<hr>
    <h3>Results</h3>
<div id="computers">
    <div class="system categorya categoryb" data-price="299">A, B -  299</div>
    <div class="system categorya" data-price="599">A -  599</div>
    <div class="system categoryb" data-price="1099">B -  1099</div>
</div>
<div id="slider-range"></div>

jQuery

 $(function() {
        $('#slider-container').slider({
            range: true,
            min: 299,
            max: 1099,
            values: [ 299, 1099 ],
            slide: function(event, ui) {
                $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
                var mi = ui.values[ 0 ];
                var mx = ui.values[ 1 ];
                filterSystem(mi, mx);
            }
        });
      $( "#amount" ).val( "$" + $( "#slider-container" ).slider( "values", 0 ) +
      " - $" + $( "#slider-container" ).slider( "values", 1 ) );
  });

function filterSystem(minPrice, maxPrice) {
    $("#computers div.system").hide().filter(function() {
        var price = parseInt($(this).data("price"), 10);
        return price >= minPrice && price <= maxPrice;
    }).show();
}

$("#filters :checkbox").click(function() {
    $("#computers div.system").hide();
    $("#filters :checkbox:checked").each(function() {
        $("." + $(this).val()).show();
    });
});

谁能帮我把这两个过滤器结合起来。

在此先感谢，对不起我的英语不好

Answer 1

您可以将这两个过滤器组合在一个函数 filterSystem() 中，您可以在滑块和复选框的每次状态更改时调用该函数：

更新

这是一个适用于多个复选框过滤器的更新：

$(function () {
    var minPrice = 299,
        maxPrice = 1099,
        $filter_lists = $("#filters ul"),
        $filter_checkboxes = $("#filters :checkbox"),
        $items = $("#computers div.system");

    $filter_checkboxes.click(filterSystem); //Call filter function on checkbox change

    $('#slider-container').slider({
        range: true,
        min: minPrice,
        max: maxPrice,
        values: [minPrice, maxPrice],
        slide: function (event, ui) {
            $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
            minPrice = ui.values[0];
            maxPrice = ui.values[1];
            filterSystem(); //Call filter function on slider change
        }
    });
    $("#amount").val("$" + minPrice + " - $" + maxPrice);

    //Slider filter
    function filterSlider(elem) {
        var price = parseInt($(elem).data("price"), 10);
        console.log(price);
        return price >= minPrice && price <= maxPrice;
    }

    //Checkbox filter 
    function filterCheckboxes(elem) {
        var $elem = $(elem),
            passAllFilters = true;
        $filter_lists.each(function () {
            var classes = $(this).find(':checkbox:checked').map(function () {
                return $(this).val();
            }).get();
            var passThisFilter = false;
            $.each(classes, function (index, item) {
                if ($elem.hasClass(item)) {
                    passThisFilter = true;
                    return false; //stop inner loop
                }
            });
            if (!passThisFilter) {
                passAllFilters = false;
                return false; //stop outer loop
            }
        });
        return passAllFilters;
    }

    //Combine checkbox and slider filters
    function filterSystem() {
        $items.hide().filter(function () {
            return filterSlider(this) && filterCheckboxes(this);
        }).show();
    }
});

这是updated fiddle

请注意，此方法需要将复选框列表包装在容器 #filters