Question

我有这个html与jquery，按价格和类别过滤产品，当我按照每个分隔过滤产品时它的工作但是，当我使用过滤器的价格和类别时，它会混淆

有人可以帮助我。

<!doctype html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <style>
    ul {list-style:none}
    </style>
</head>
<body>
    <ul id="shop">
        <li><a class="add-to-cart" href="#" data-cat="fruit" data-name="Apple" data-price="1.22">Apple $1.22</a></li>
        <li><a class="add-to-cart" href="#" data-cat="fruit" data-name="Banana" data-price="1.33">Banana $1.33</a></li>
        <li><a class="add-to-cart" href="#" data-cat="fruit" data-name="Lemon" data-price="22.33">Lemon $22.33</a></li>
        <li><a class="add-to-cart" href="#" data-cat="fruit" data-name="Orange" data-price="5.22">Orange $5.22</a></li>

        <li><a class="add-to-cart" href="#" data-cat="vegs" data-name="Cucumber" data-price="5.28">Cucumber $5.28</a></li>
        <li><a class="add-to-cart" href="#" data-cat="vegs" data-name="Lettuce" data-price="5.12">Lettuce $5.12</a></li>
        <li><a class="add-to-cart" href="#" data-cat="vegs" data-name="Tomato" data-price="4.22">Tomato $4.22</a></li>
        <li><a class="add-to-cart" href="#" data-cat="vegs" data-name="Mentha" data-price="2.52">Mentha $2.52</a></li>

        <li><a class="add-to-cart" href="#" data-cat="drink" data-name="Milk" data-price="1.28">Milk $1.28</a></li>
        <li><a class="add-to-cart" href="#" data-cat="drink" data-name="Watar" data-price="2.12">Watar $2.12</a></li>
        <li><a class="add-to-cart" href="#" data-cat="drink" data-name="Joce" data-price="3.22">Joce $3.22</a></li>

    </ul>

    <form action="">
        <input id="fruit" type="checkbox" name="fruit" value="Fruit">Fruit
        <input id="vegs" type="checkbox" name="vigs" value="Vigs">Vegs
        <input id="drink" type="checkbox" name="vigs" value="Vigs">Drink
        Price : From <input id="price-from" type="text" name="price-from" value=""> 
                To <input id="price-to" type="text" name="price-to" value="">
    </form>


    <script>
        $(document).ready(function() {

            $('#price-to').change(function(){
                $('li a[data-price]').each(function(){
                var filterPriceFrom = $('#price-from').val();
                var filterPriceTo = $('#price-to').val();
                var price = Number($(this).attr("data-price"));
                if(price >= filterPriceFrom && price <= filterPriceTo){

                    if($(this).css('display') == 'none'){$(this).hide();}
                    else{$(this).show();}

                }
                else{
                    $(this).hide();
                }
             });
            });



            $('input[type="checkbox"]').click(function() {
                if ($('input[type="checkbox"]').is(':checked')) {

                    $('li a[data-cat]').hide();
                    $('input[type="checkbox"]').each(function() {
                        if ($(this).is(':checked')) {
                            var att = $(this).attr('id');
                            var sel = 'li a[data-cat="' + att + '"]';

                            $(sel).show();

                        } else {
                            $(sel).hide();
                        }
                    });

                } else {
                    $('li a[data-cat]').show()
                }
            });

        });
    </script>

</body>

</html>

Answer 1

这里：这正是您所需要的。你的代码需要相当多的重组，但是你走了。

$(document).ready(function() {

    var filterType = [];
    var filterPriceFrom;
    var filterPriceTo;

    function applyFilters() {
      filterPriceFrom = Number($('#price-from').val());
      filterPriceTo = Number($('#price-to').val());
      filterType = [];
      $("input[type='checkbox']:checked").each(function () {
        filterType.push($(this).attr("id"));
      });
      $("li a").hide();
      $("li a").each(function (){
        var price = Number($(this).attr("data-price"));

        if ((price >= filterPriceFrom && price <= filterPriceTo) || (filterPriceFrom === 0 && filterPriceTo === 0)){
          if (!filterType.length || filterType.indexOf($(this).attr("data-cat")) > -1) {
            $(this).show();
          }
        }
      });
    }

    $('#price-to, input[type="checkbox"]').change(function(){
      applyFilters();
    });
  });

产品过滤器在jquery中

1 个答案: