如何使用 Javascript 在另一个函数中调用范围滑块值

Question

我的项目中有范围滑块，returns 最小和最大里程值。我想在另一个 Javascript 函数中获取值以进行进一步处理。它一直运行良好，但当我尝试将我的滑块包装到一个函数中时 firstFunction(){}，它停止出现在页面上。

如何获取另一个函数中的值？

HTML

 <div id="mileage-range"></div>
  <div class="d-flex justify-content-between mt-2">
   <input class="range" onchange="firstFunction()" type="text"  readonly="readonly" id="range_mileage" />
  </div>

Javascript

function firstFunction() {  
  var myslider= $('#mileage-range');
  myslider.ionRangeSlider({
    type: "double",
    min: 0,
    max: 200000,
    from: 0,
    to: 200000,
    postfix:" km",
    max_postfix:"+",
    onFinish: function(data) {
      $("#range_mileage" ).val( "$" + data.from + " - $" + data.to );
      var value1 = data.from;
      var value2 = data.to;
      return {
        min: value1,
        max: value2,
      }      
    }
  })
}//End of function

$("#mileage-range").on("change", function(){ 
  var values=firstFunction();  // this will grab you the return val
  var first = values.val1;
  var second = values.val2;
  console.log(first);
  console.log(second);
});

Answer 1

考虑以下因素。

function firstFunction() {  
  var myslider= $('#mileage-range');
  myslider.ionRangeSlider({
    type: "double",
    min: 0,
    max: 200000,
    from: 0,
    to: 200000,
    postfix:" km",
    max_postfix:"+",
    onFinish: function(data) {
      $("#range_mileage" )
        .val( "$" + data.from + " - $" + data.to )
        .data("from", data.from)
        .data("to", data.to);  
    }
  })
}//End of function
//Call Function
firstFunction();

然后你需要的时候可以调用这些。

$("#mileage-range").on("change", function(){ 
  var first = $(this).data("from");
  var second = $(this).data("to");
  console.log(first);
  console.log(second);
});

当您调用 firstFunction() 时，它会初始化滑块。 onFinish 届时不会触发事件。它需要用户执行选择才能触发。

Answer 2

如果您的 AJAX 调用在您的范围滑块更改（完成更改）时发生，那么您可以使用 onFinish 参数传递一个函数来实现 AJAX 调用：

<input type="text" class="js-range-slider" name="range" value="" />

<script>
    function processAJAX (data) {
        var from = data.from;
        var to = data.to;
        // get your other data
        // package all of the data and send the AJAX call
    }

    // Setup your slider
    var myslider= $('#mileage-range').ionRangeSlider({
        type: "double",
        min: 0,
        max: 200000,
        from: 0,
        to: 200000,
        postfix: " km",
        max_postfix: "+",
        onFinish: processAJAX
    });
</script>

当然，每次移动其中一个滑块时都会调用 AJAX。

如果您的 AJAX 调用发生在不同的时间（例如，您的用户在单击更新按钮之前设置了滑块值以外的其他值），那么您可以使用几个变量来存储 from/to 值，直到您准备好发送 AJAX 呼叫。（我在下面的示例中包含了几个全局变量，但您可以根据需要限制范围）。

离子范围滑块的 public 方法（根据其 website）仅允许您更新参数值、重置值或销毁滑块。您似乎无法读取当前值（我没有检查代码）。这就是为什么每次用户完成移动其中一个手柄时都需要保存这些值的原因。

<input type="text" class="js-range-slider" name="range" value="" />

<script>
    // global variables
    var sliderFrom;
    var sliderTo;

    function saveSliderValues (data) {
        sliderFrom = data.from;
        sliderTo = data.to;
    }

    // Setup your slider
    var myslider= $('#mileage-range').ionRangeSlider({
        type: "double",
        min: 0,
        max: 200000,
        from: 0,
        to: 200000,
        postfix: " km",
        max_postfix: "+",
        onFinish: saveSliderValues
    });


    function processAJAX (data) {
        var from = sliderFrom;
        var to = sliderTo;
        // get your other data
        // package all of the data and send the AJAX call
    }
</script>

我留下了滑块的句柄 (myslider = $('#mileage-range')...)，但除非您需要能够更改或重置滑块值，否则您可能不需要句柄。

如何使用 Javascript 在另一个函数中调用范围滑块值

How to call range slider values in another function using Javascript

html

javascript

jquery

jquery-ui