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

我想要一个页面，其中我将显示一组div，div将根据页面上的选择显示

这里我使用两种类型的过滤器，即jqueryui滑块（价格范围）和复选框

这两种方法各自都很好，但我想将两者结合起来

我找不到一个结合了两个过滤器的技巧

小提琴：

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>

A类


B类



结果
A、 B-299
A-599
B-1099

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

$（函数（）{
$（“#滑块容器”）。滑块({
范围：对，
民:299,，
最高：1099，
数值：[2991099]，
幻灯片：功能（事件、用户界面）{
$（“#amount”）.val（“$”+ui.values[0]+“-$”+ui.values[1]）；
var mi=ui.values[0]；
var mx=ui.values[1]；
过滤系统（mi、mx）；
}
});
$（“#金额”）.val（$”+$（“#滑块容器”）.slider（“值”，0）+
“-$”+$（“#滑块容器”）。滑块（“值”，1）；
});
函数过滤器系统（最小价格、最大价格）{
$（“#computers div.system”）.hide（）.filter（函数（）{
var price=parseInt（$（此）.data（“价格”），10）；
return price>=minPrice&&price您可以将两个过滤器组合在一个函数中
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();
    }
});

$（函数（）{
var minPrice=299，
maxPrice=1099，
$filter_list=$（“#filters ul”），
$filter_复选框=$（“#filters:复选框”），
$items=$（“#计算机部门系统”）；
$filter_复选框。单击（filterSystem）；//在复选框更改时调用filter函数
$（“#滑块容器”）。滑块({
范围：对，
敏：敏普莱斯，
马克斯：马克斯普莱斯，
值：[最小价格，最大价格]，
幻灯片：功能（事件、用户界面）{
$（“#amount”）.val（“$”+ui.values[0]+“-$”+ui.values[1]）；
minPrice=ui.values[0]；
maxPrice=ui.values[1]；
filterSystem（）；//在滑块更改时调用filter函数
}
});
美元（“#金额”）.val（“$”+minPrice+“-$”+maxPrice）；
//滑块过滤器
功能过滤器滑块（elem）{
var price=parseInt（$（elem）.data（“价格”），10）；
控制台日志（价格）；
return price>=minPrice&&price但我想在这里再添加一个过滤器，可以吗？jsfiddle.net/bZmJ8/17