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

Posted 2023-03-13

【中文标题】如何使用两个 Ui Range Sliders 对相同的数据进行排序

【英文标题】：How to use two Ui Range Sliders to sort the same data

【发布时间】：2018-05-03 19:33:07

【问题描述】：

我是这里的新人。很高兴见到你。我希望你问我自己无法解决的问题。

我正在尝试使用 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>

【问题讨论】：

p 标签内不应有div、label 或input。如果您想拥有一个容器来容纳所有这些，请使用div。

你也应该分享一些 CSS，这样我们就可以有一个工作的（和好的）sn-p。

对。这是小提琴jsfiddle.net/kapski/bot9m0rh

没问题，我已经回答你了。您应该使用 Fiddle 中的 tidy 按钮。缩进很有帮助。 :)

【参考方案1】：

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

所以，这是我为使其工作所做的工作： 我合并了两个showProducts() 函数，只得到一个，没有参数。 每个滑块的最小值和最大值被恢复并用于过滤。 我还创建了一个data_filter() 函数来简化过滤，并避免重复代码。

这是一个sn-p：

// 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>

希望对你有帮助。

【讨论】：

感谢您的帮助，但这并不是我所需要的。当价格范围在示例 70-115 和质量范围 3-24 时，我不想看到价值 200 [zł]“价格”的产品，即使它的质量在第二个滑块的范围内。看起来第二个滑块只能工作。任何的想法？我的意思是第一个滑块应该更强。

太棒了！我怎么能在这里投票给你的技能？如果将来我的脚本有任何问题，我一定会与您联系

@Łukasz 我认为你只能投票超过 15 声望。但无论如何，如果这结束了您的问题，您可以接受我的回答。 :) 我将你添加到我的“关注列表”中；所以如果你发布一个新问题，我可能会在那里！

嗨，Takit Isy。你能帮我处理一些 UiSlider 案例吗？ ***.com/questions/51918866/…