如何使用两个 Ui Range Sliders 对相同数据进行排序

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

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

所以，这是我如何让它发挥作用的：
我合并了两个 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>

希望对您有所帮助。

如何使用两个 Ui Range Sliders 对相同数据进行排序

How to use two Ui Range Sliders to sort the same data

javascript

jquery

uislider