Question

我有一个包含三种不同类型过滤器的网页; Category（复选框），Price（滑块）和Search（标签）。这些都可以单独处理，但是输出结合起来是不准确的。

我能想到的唯一方法是将所有过滤器包装在一个函数中，并在选中复选框时调用所有过滤器，在搜索中键入内容或移动幻灯片。然而，这种方法似乎非常低效。

你能给我一些关于同步这些不同类型过滤器的提示/指示吗？

解决方案： combining multiple jquery filters (UI slider, checkbox)

<!DOCTYPE html>
<html>
<head>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>

    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" />

    <script>

        $(document).ready(function() {

            /* SEARCH FILTER */
            $("#search").keyup(function(){
                var term = $(this).val();
                if( term != "") {
                    $(".product").hide();
                    $(".product").filter(function(){
                        return $(this).text().toLowerCase().indexOf(term) >-1
                    }).show();
                } else {
                    $(".product").show();
                }
            });

            /* CHECKBOX FILTER */
            $('.filter').click(function() {
                if (!$("input[type='checkbox']").is(":checked")){
                    $('.product').show();
                } else {
                    $('.product').hide();
                    $('.filter').each(function() {
                        if($(this).is(':checked')) {
                            var filter = $(this).attr('filter');
                            var data   = $(this).attr('data');
                            $.each($('.product'), function() {
                                var p = $(this);
                                var fs = $(this).attr(filter).split(", ");
                                $.each(fs, function(index, value) {
                                    console.log('value: ' + value);
                                    if(data == value) {
                                        p.show();
                                    }
                                });
                            });
                        }
                    });
                }
            });

            /* PRICE FILTER */
            $(function () {
                $('#slider-container').slider({
                    range: true,
                    min: 299,
                    max: 699,
                    values: [299, 699],
                    create: function() {
                        $("#amount").val("299 - 699");
                    },
                    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);
                    }
                })
            });

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

        });
    </script>

    <style>
        #slider-container {
            width:350px;
            margin-left:30px;
        }
    </style>

</head>

<body>

    <label for="search">Search:</label> <input type="text" id="search" value=""/>

    <br>

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

    <div id="slider-range"></div>

    <p>Category</p>
    <div>
        <input class="filter" filter="category" data="boeken" type="checkbox" />
        books
    </div>

    <div>
        <input class="filter" filter="category" data="spellen" type="checkbox" />
        games
    </div>

    <div>
        <input class="filter" filter="category" data="andere" type="checkbox" />
        other
    </div>
    <p>Partners</p>
    <div>
        <input class="filter" filter="partner" data="amazon" type="checkbox" />
        amazon
    </div>
    <div>
        <input class="filter" filter="partner" data="ebay" type="checkbox" />
        ebay
    </div>
    <br>

    <div class="products">
        <div class="product" category="boeken" partner="amazon" data-price="299" />
            Product 1 - book - amazon - 299
        </div>
        <div class="product" category="spellen" partner="ebay" data-price="499" />
            Product 2 - game - ebay - 499
        </div>
        <div class="product" category="andere" partner="ebay" data-price="310" />
            Product 3 - other - ebay - 310
        </div>
        <div class="product" category="andere" partner="amazon, ebay" data-price="599" />
            Product 4 - other - amazon and ebay - 599
        </div>
    </div>

</body>
</html>

同步不同类型的过滤器

0 个答案: