遍历几个 bootstrap 滑块并在每个函数中获取范围值

Question

我有一个页面有几个 bootstrap-sliders。这是一个代表性的例子：

<label>My Label 1</label>
<input id="mySlider1" data-slider-id='mySlider1' type="text"/>      

<label>My Label 2</label>
<input id="mySlider2" data-slider-id='mySlider2' type="text"/>

下面是滑块的 javascript 定义：

$("#mySlider1").slider({
    min: 0,
    max: 5000,
    value: [0, 5000]
});

$("#mySlider2").slider({
    min: 0,
    max: 5000,
    value: [0, 5000]
});

有时我想遍历所有滑块并从 'each' 循环中获取它们的范围值：

$('.slider').each(function(){
    var key = $(this).attr("id");
    var value = $(this).val();  /* <- this is the problem line */
    console.log("key = " + key + ", value = " + value);
});

控制台打印出来：

key = mySlider1, value = 
key = mySlider2, value =

我希望将 'value' 视为范围 [0,5000] 的 2 元素数组。

Answer 1

这里的问题是您正在尝试迭代 .slider，这是为 bootstrap-slider 制作滑块的方式保留的 class。您应该改为向 input 元素添加一个滑块，例如在这个 jsfiddle 中：https://jsfiddle.net/a3wdzyck/

遍历几个 bootstrap 滑块并在每个函数中获取范围值

iterate through several bootstrap sliders and get range values within an each function

bootstrap-slider