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

【问题标题】：How to call range slider values in another function using Javascript如何使用 Javascript 在另一个函数中调用范围滑块值
【发布时间】：2021-01-11 11:23:31
【问题描述】：

我的项目中有一个范围滑块，它返回最小和最大里程值。我想获取另一个 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);
});

【问题讨论】：

为什么要将滑块“包裹”在另一个函数中？您的 firstFunction 正在创建您的滑块，因此通常会进入您的页面设置代码。在您的滑块设置中，您可以定义 onChange 和 onFinish 的回调函数，以对这些值执行任何操作。你不需要有一个单独的函数来监控包含的 div 的变化。
@RichDeBourke 我想在另一个函数中获取值，我将从那里发送一个 ajax 调用，其中一些其他变量来自不同的地方。根据您的建议，即使编写回调方法，我也没有成功。您能否通过在您的答案中编写代码序列来进一步指导我。非常感谢
这不是一个 jQuery UI 滑块。还有一个模糊的return 元素。这会将值返回给调用函数，而不是父函数。我也看不到 val1 和 val2 被定义为索引的位置。

标签： javascript html jquery jquery-ui

【解决方案1】：

如果您的 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 调用。（我在下面的示例中包含了几个全局变量，但您可以根据需要限制范围）。

离子范围滑块的公共方法（根据他们的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')...)，但除非您需要能够更改或重置滑块值，否则您可能不需要该句柄。

【讨论】：

【解决方案2】：

考虑以下内容。

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 事件此时不会被触发。它需要用户执行选择才能触发。

【讨论】：