如何将 jQuery UI 所有选定范围（不仅是最小值和最大值）加载到数组中

Posted 2023-05-08

【中文标题】如何将 jQuery UI 所有选定范围（不仅是最小值和最大值）加载到数组中

【英文标题】：How to Load jQuery UI All Selected Range (Not Only Min & Max) To an Array

【发布时间】：2019-02-11 17:01:27

【问题描述】：

您能否看一下这个演示，让我知道如何将选定的最小值和最大值之间的范围值加载到数组中

selected.push(ui.values); 给了我选择的最小值和最大值，这没关系，但我也需要介于两者之间的值

$( function() 
var selected =[];
    $( "#slider-range" ).slider(
      range: true,
      min: 133,
      max: 146,
      values: [ 133, 146 ],
      stop: function( event, ui ) 
        $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
        
         $("#dl-sv-input-mmr").val(ui.values[0] + " - " + ui.values[1]);
        selected.push(ui.values);
        console.log(selected)
      ,
      
    );
    $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
      " - $" + $( "#slider-range" ).slider( "values", 1 ) );
   );

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

【参考方案1】：

请使用

selected.push(ui.values[0]);

而不是

selected.push(ui.values);

【参考方案2】：

您可以添加一个循环来将值从下限推送到上限：

$(function() 
  $("#slider-range").slider(
    range: true,
    min: 133,
    max: 146,
    values: [133, 146],
    stop: function(event, ui) 
      var selected = [];
      $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
      $("#dl-sv-input-mmr").val(ui.values[0] + " - " + ui.values[1]);
      for (var i = ui.values[0]; i <= ui.values[1]; i++) 
        selected.push(i);
      
      console.log(selected);
    ,

  );
  $("#amount").val("$" + $("#slider-range").slider("values", 0) +
    " - $" + $("#slider-range").slider("values", 1));
);

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

【参考方案3】：

也可以做一个简单的函数。

$(function() 
  function fillRange(start, end) 
    var arr = [];
    for (var i = start; i <= end; i++) 
      arr.push(i);
    
    return arr;
  
  var selected = [];
  $("#slider-range").slider(
    range: true,
    min: 133,
    max: 146,
    values: [133, 146],
    stop: function(event, ui) 
      $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
      $("#dl-sv-input-mmr").val(ui.values[0] + " - " + ui.values[1]);
      selected = fillRange(ui.values[0], ui.values[1]);
      console.log(selected)
    ,
  );
  $("#amount").val("$" + $("#slider-range").slider("values", 0) + " - $" + $("#slider-range").slider("values", 1));
);

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

这与 @SLePort 答案相同，只是包装在一个函数中。没有说明为什么您需要在数组中使用这些。可以考虑，如果需要，可以只测试一个值是否介于两个选定值之间。