Question

我在向商品过滤条件添加第二个滑块时遇到问题。现在有一个滑块和复选框可以过滤产品。但此刻，我需要添加额外的范围滑块以更精确地进行过滤。我试图这样做，但是没有任何效果。谢谢您的帮助。

这是jsfiddle示例：https://jsfiddle.net/27zo8eL3/4/

HTML：

       <ul class="tabela lokata" id="products">
            <li class="tabelki" data-price="10000" data-quality="1" data-category="1 2 3 4 ">max 10 000 USD contains category 1 2 3 4 and quality 1</li>
            <li class="tabelki" data-price="12000" data-quality="2" data-category="2 3">max 12 000 USD contains category 2 3 and quality 2</li>
            <li class="tabelki" data-price="13000" data-quality="3" data-category="4 5">max 13 000 USD contains category 4 5 and quality 3 </li>
            <li class="tabelki" data-price="14000" data-quality="4" data-category="5 6 ">max 14 000 USD contains category 5 6 and quality 4</li>
            <li class="tabelki" data-price="12000" data-quality="5" data-category="5">max 12 000 USD contains category 5 and quality 5</li>
            <li class="tabelki" data-price="14000" data-quality="6" data-category="1 2">max 14 000 USD contains category 1 2 and quality 6</li>
            <li class="tabelki" data-price="16000" data-quality="7" data-category="1 2 3">max 16 000 USD contains category 1 2 3 and quality 7</li>
            <li class="tabelki" data-price="20000" data-quality="8" data-category="7 8">max 20 000 USD contains category 7 8 and quality 8</li>

        </ul>

JS：

  function filterPrice(products) {
      let minP = $("#price").slider("values", 0);
      let maxP = $("#price").slider("values", 1);
      return products.filter(function() {
        let value = parseInt($(this).data("price"), 10);
        return !(value > maxP || value < minP);
      });
    }

    function filterCheckboxes(products) {
      checkboxes = $("input:checked").filter(function() {
        return $.inArray($(this).attr("name"), ['fl-1', 'fl-2', 'fl-3', 'fl-4', 'fl-5', 'fl-6', 'fl-7', 'fl-8']) != -1;
      }).map(function() {
        return this.value;
      });


      // If no checkboxes are checked, don't filter with them
      if (checkboxes.length == 0) {
        return products;
      }

      return products.filter(function() {
        categories = $(this).data("category").toString().split(" ");
        let val = true;
        checkboxes.each(function() {
          if (!categories.includes(this[0])) {
            val = false;
            return;
          }
        });
        return val;
      });

    }

    function filterProducts() {
      // Reset filters
      products = $("#products li");
      products.hide();
      products = filterPrice(products);
      products = filterCheckboxes(products);
      products.show();

      let numItems = products.length;

      if (numItems > 0) {
        label = "We found " + numItems + " offers. ";
      } else {
        label = "No result found.";
      }

      $("#found").text(label);
    }

    $(function() {
  var options = {
    range: true,
    min: 1,
    max: 60,
    step: 1,
    values: [1, 24],
    slide: function(event, ui) {
      $("#amount2").val(ui.values[0] + " - " + ui.values[1]);
    },
    change: function(event, ui) {
      showProducts();
    }

  };

  $("#quality").slider(options);
  $("#amount2").val($("#quality").slider("values", 0) +
    " - " + $("#quality").slider("values", 1));
});

    $(function() {
      let options = {

        min: 500,
        max: 100000,
        step: 500,
        values: [10000],
        slide: function(event, ui) {
          $("#amount").val(ui.values[0] + " USD");
        },
        change: function(event, ui) {
          filterProducts();
        }

      };

      $("input").filter(function() {
        return $.inArray($(this).attr("name"), ['fl-1', 'fl-2', 'fl-3', 'fl-4', 'fl-5', 'fl-6', 'fl-7', 'fl-8']) != -1;
      }).change(filterProducts);

      $("#price").slider(options);
      $("#amount").val($("#price").slider("values", 0) + " USD");

    });

Answer 1

我自己做的。很简单。

function filterQuality(products) {
      let minQ = $("#quality").slider("values", 0);
      let maxQ = $("#quality").slider("values", 1);
      return products.filter(function() {
        let value = parseInt($(this).data("quality"), 9);
        return !(value > maxQ || value < minQ);
      });
    }

Answer 2

多个滑块 DEMO

https://codepen.io/ssuryar/pen/vYLpzZZ

HTML

<h4>Minutes</h4>
<div id="data-range"></div>

<h4>Price</h4>
<div id="price-range"></div>

CSS

.ui-draggable, .ui-droppable {
    background-position: top;
}
.ui-widget-header {background: #006fba;}
.value {    position: absolute;    top: 30px;    left: 50%;    margin: 0 0 0 -20px;    width: 40px;    text-align: center;    display: block;    font-weight: normal;}

JS

$( function() {
    $( "#data-range" ).slider({
      range: true,
      min: 0,
      max: 100,
      values: [ 50, 75 ],
      slide: function( event, ui ) {
       $('.ui-slider-handle:eq(0) .price-range-min').html('$' + ui.values[ 0 ]);
       $('.ui-slider-handle:eq(1) .price-range-max').html('$' + ui.values[ 1 ]);
      }
    });
     $( "#price-range" ).slider({
      range: true,
      min: 0,
      max: 100,
      values: [ 20, 50 ],
      slide: function( event, ui ) {
       $('.ui-slider-handle:eq(0) .price-range-min').html('$' + ui.values[ 0 ]);
       $('.ui-slider-handle:eq(1) .price-range-max').html('$' + ui.values[ 1 ]);
      }
    });
    
    $('.ui-slider-handle:eq(0)').append('<span class="price-range-min value">$' + $('#data-range').slider('values', 0) + '</span>');
    $('.ui-slider-handle:eq(1)').append('<span class="price-range-max value">$' + $('#data-range').slider('values', 1) + '</span>');
    
    $('.ui-slider-handle:eq(2)').append('<span class="price-range-min value">$' + $('#price-range').slider('values', 0) + '</span>');
    $('.ui-slider-handle:eq(3)').append('<span class="price-range-max value">$' + $('#price-range').slider('values', 1) + '</span>');
  } );

添加范围滑块

2 个答案: