如何使用两个Ui范围滑块对相同的数据进行排序

Question

我是新来的。见到你很高兴。我希望你能问我一个人解决不了的问题。

我正在尝试排序一些数据使用的UI范围滑块。我想先对价格进行排序，然后在对商品进行排序后，我想根据它们的质量对它们进行排序。但有个问题。当第一个排序操作正确完成时，第二个排序操作就无法工作。我无法找出我的代码有什么问题。我是新来的JS。我还没有找到任何答案。我正在使用JQuery和UI。

请帮帮忙。

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

<p>
<label for="amount2">Quality</label>
<input type="text" id="amount2" readonly style="border:0; color:#f6931f; font-weight:bold;">
<div class="slider" id="quality"></div>
</p>

<ul id="products">
<li data-price="10" data-quality="1"> product - 10 zł q1</li>
<li data-price="50" data-quality="3"> product - 50 zł q3</li>
<li data-price="100" data-quality="6"> product - 100 zł q6</li>
<li data-price="150" data-quality="12"> product - 150 zł q12</li>
<li data-price="200" data-quality="24"> product - 200 zł q24</li>
</ul>

和脚本：

<script>
function showProducts(minQ, maxQ) {
$("#products li").filter(function() {
var quality = parseInt($(this).data("quality"), 10);
if(quality >= minQ && quality <= maxQ){
$(this).removeClass('slider1Hide');
} else {
$(this).addClass('slider1Hide');
}
});
}


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

};

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


</script>

<script>
function showProducts(minP, maxP) {
$("#products li").filter(function() {
var price = parseInt($(this).data("price"), 10);
if(price >= minP && price <= maxP){
$(this).removeClass('slider1Hide');
} else {
$(this).addClass('slider1Hide');
}
});
}


$(function() {
var options = {
range: true,
min: 0,
max: 250,
step: 1,
values: [100, 200],
slide: function( event, ui ) {
$( "#amount" ).val(ui.values[ 0 ] + " zł - " + ui.values[ 1 ] + " zł" );
},
change: function(event, ui) {
var minP = $("#price").slider("values", 0);
var maxP = $("#price").slider("values", 1);
showProducts(minP, maxP);
}

};

$("#price").slider(options);
$( "#amount" ).val( $( "#price" ).slider( "values", 0 ) +
" zł - " + $( "#price" ).slider( "values", 1 ) + " zł" );
});


</script>

Answer 1

问题是，一个滑块的修改是删除另一个滑块添加的类。要使其正常工作，您需要在滑块移动后启动两个更新。

因此，下面是我如何使它工作的方法：

我将两个showProducts()函数合并为只有一个，没有参数。

每个滑块的最小值和最大值被恢复并用于过滤。

我还创建了一个data_filter()函数来简化过滤，并避免重复代码。

下面是一个片段：

​

// Added this function
function data_filter(mini, maxi, data_name){
  $("#products li").filter(function() {
    var value = parseInt($(this).data(data_name), 10);
    if (value > maxi || value < mini) {
      $(this).addClass('slider1Hide');
    }
  });
}

function showProducts() {
  // Reset filters
  $("#products li").removeClass('slider1Hide');
  // Price
  var minP = $("#price").slider("values", 0);
  var maxP = $("#price").slider("values", 1);
  data_filter(minP, maxP, "price"); // Call the new function
  // Quality
  var minQ = $("#quality").slider("values", 0);
  var maxQ = $("#quality").slider("values", 1);
  data_filter(minQ, maxQ, "quality"); // Call the new function
}

// Below here, there's no change    

$(function() {
  var options = {
    range: true,
    min: 1,
    max: 36,
    step: 1,
    values: [3, 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() {
  var options = {
    range: true,
    min: 0,
    max: 250,
    step: 1,
    values: [100, 200],
    slide: function(event, ui) {
      $("#amount").val(ui.values[0] + " zł - " + ui.values[1] + " zł");
    },
    change: function(event, ui) {
      showProducts();
    }

  };

  $("#price").slider(options);
  $("#amount").val($("#price").slider("values", 0) +
    " zł - " + $("#price").slider("values", 1) + " zł");
});

.slider1Hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<div><!-- DIV here, no P -->
  <label for="amount">Price</label>
  <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
  <div class="slider" id="price"></div>
</div><!-- DIV here, no P -->

<div><!-- DIV here, no P -->
  <label for="amount2">Quality</label>
  <input type="text" id="amount2" readonly style="border:0; color:#f6931f; font-weight:bold;">
  <div class="slider" id="quality"></div>
</div><!-- DIV here, no P -->

<ul id="products">
  <li data-price="10" data-quality="1"> product - 10 zł q1</li>
  <li data-price="50" data-quality="3"> product - 50 zł q3</li>
  <li data-price="100" data-quality="6"> product - 100 zł q6</li>
  <li data-price="150" data-quality="12"> product - 150 zł q12</li>
  <li data-price="200" data-quality="24"> product - 200 zł q24</li>
</ul>

​

希望能帮上忙。