Question

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

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

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

我无法找到结合两种过滤器的技巧

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

中

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

1 个答案: