javascript - noUiSlider:创建多个

Question

我在一个有几十个 slider 的表单上使用 noUiSlider ( http://refreshless.com/nouislider/ )。我想我可以设置一个类名数组和一个循环，而不是为每个复制/粘贴代码。这样可行;即，它设置了工作 slider 。但是，表单还必须在更新时显示 slider 的值，这是我无法解决的部分。我知道如何用静态值来做，但不知道在循环中......

简化示例:

JavaScript:

var steps = [
    'Never',
    'Occasionally',
    'Frequently',
    'Constant'
];
// This array will have many more
var slider_names = [
    'slider',
    'slider2'
];
var sliders = [];

for (var i = 0; i < slider_names.length; i++) {
    sliders.push(document.getElementById(slider_names[i]));
    noUiSlider.create(sliders[i], {
        start: 0,
        connect: 'lower',
        step: 1,
        range: {
            'min': [ 0 ],
            'max': [ 3 ]
        },
        pips: {
            mode: 'steps',
            density: 100
        }
    });
    sliders[i].noUiSlider.on('update', function(values, handle) {
// ***** Problem line *****
        document.getElementById(slider_names[i]+'-value').innerHTML = steps[parseInt(values[handle])];
// ***** Problem line *****
    });
}

HTML:

<div id="slider-value"></div>
<div id="slider"></div>
<div id="slider2-value"></div>
<div id="slider2"></div>  (etc...)

上面突出显示了问题行......当使用静态值(例如，'slider2-value')时它工作正常，但我似乎无法弄清楚如何在更新事件触发时定位适当的 id ... slider_names[i] 显然不会在那里工作。我可能遗漏了一些明显的东西？谢谢!

Answer 1

我今天也遇到了同样的问题，我使用了下面的代码。

基本上我只是将 slider 的所有值发送到此函数，然后将所有结果推送到一个数组中，然后我可以处理我想要的数据数组。

希望这对你也有一些用处。

var sliders = document.getElementsByClassName('sliders');

for ( var i = 0; i < sliders.length; i++ ) {

    noUiSlider.create(sliders[i], {
        start: 50,
        step: 5,
        connect: "lower",
        orientation: "horizontal",
        range: {
            'min': 0,
            'max': 100
        },
    });

    sliders[i].noUiSlider.on('slide', addValues);
}

function addValues(){
    var allValues = [];

    for (var i = 0; i < sliders.length; i++) {
        console.log(allValues.push(sliders[i].noUiSlider.get()));
    };

    console.log(allValues);
}