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

我的项目中有一个范围滑块，它返回最小和最大里程值。我想获取另一个Javascript函数中的值，以便进一步处理。它一直工作得很好，但当我尝试将滑块包装到函数

firstFunction（）{}

中时，它停止显示在页面上

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

HTML

---

考虑以下几点

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事件。它需要用户执行要触发的选择。

请考虑以下事项

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事件。它需要用户执行要触发的选择。

如果在范围滑块更改（完成更改）时发生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>

函数processAJAX（数据）{
var from=数据来源；
var to=data.to；
//获取其他数据
//打包所有数据并发送AJAX调用
}
//设置滑块
var myslider=$（“#里程范围”）.IonRangeSlaider({
类型：“双”，
分:0,，
最高：20万，
起:0,，
至：20万，
后缀：“km”，
最大后缀：“+”，
onFinish:processAJAX
});

当然，这将导致每次移动一个滑块时都进行AJAX调用

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

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

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

//全局变量
var滑片；
var-sliderTo；
函数saveSliderValues（数据）{
sliderFrom=data.from；
sliderTo=data.to；
}
//设置滑块
var myslider=$（“#里程范围”）.IonRangeSlaider({
类型：“双”，
分:0,，
最高：20万，
起:0,，
至：20万，
后缀：“km”，
最大后缀：“+”，
onFinish:saveSliderValues
});
函数processAJAX（数据）{
var from=滑块from；
var to=sliderTo；
//获取其他数据
//打包所有数据并发送AJAX调用
}

---

我留下了滑块的句柄（

myslider=$（“#里程范围”）…

），但除非您需要能够更改或重置滑块值，否则您可能不需要该句柄。

如果在范围滑块更改（完成更改）时发生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>

函数processAJAX（数据）{
var from=数据来源；
var to=data.to；
//获取其他数据
//打包所有数据并发送AJAX调用
}
//设置滑块
var myslider=$（“#里程范围”）.IonRangeSlaider({
类型：“双”，
分:0,，
最高：20万，
起:0,，
至：20万，
后缀：“km”，
最大后缀：“+”，
onFinish:processAJAX
});

当然，这将导致每次移动一个滑块时都进行AJAX调用

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

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

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

//全局变量
var滑片；
var-sliderTo；
函数saveSliderValues（数据）{
sliderFrom=data.from；
sliderTo=data.to；
}
//设置滑块
var myslider=$（“#里程范围”）.IonRangeSlaider({
类型：“双”，
分:0,，
最高：20万，
起:0,，
至：20万，
后缀：“km”，
最大后缀：“+”，
onFinish:saveSliderValues
});
函数processAJAX（数据）{
var from=滑块from；
var to=sliderTo；
//获取其他数据
//打包所有数据并发送AJAX调用
}

---

我留下了滑块的句柄（

myslider=$（“#里程范围”）…

），但除非您需要能够更改或重置滑块值，否则您可能不需要该句柄。

为什么要将滑块“包装”到另一个函数中？您的第一个函数是创建滑块，所以通常这会进入页面设置代码。在滑块设置中，可以为onChange和onFinish定义回调函数，以便对值执行任何操作。您不需要使用单独的函数来监视包含div的更改。@RichDeBourke我想在另一个函数中获取值