Javascript noUiSlider：创建多个

我在一个表单上使用noUiSlider（），这个表单上有几十个滑块。我想我可以只设置一个类名数组和一个循环，而不是复制/粘贴每个类的代码。这是可行的；即，它设置工作滑块。然而，表单还必须在更新时显示滑块的值，这是我无法解决的部分。我知道如何使用静态值，但不在循环中

简化示例：

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 *****
    });
}

var步骤=[
“从来没有”，
“偶尔”，
"经常",，
“常数”
];
//此阵列将有更多
变量滑块名称=[
“滑块”，
“slider2”
];
var滑块=[]；
对于（变量i=0；i

HTML:

（等等……）

---

上面突出显示了问题行。。。当使用静态值（例如，“slider2值”）时，它工作得很好，但我似乎不知道如何在更新事件触发时以适当的id为目标。。。我的名字显然在那里不起作用。我可能遗漏了一些明显的东西？谢谢

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

基本上，我只是将滑块的所有值发送到这个函数，然后将所有结果推送到一个数组中，然后我可以按照自己的意愿处理数据数组

希望这也能对你有所帮助

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);
}

var sliders=document.getElementsByClassName（'sliders'）；
对于（变量i=0；i

这是一个工作模型，允许您在同一页面上有多个Nouislider和slider值

这是3个滑块的html。您可以包含任意数量的内容

    <div class="slider"></div>
    <div class="value">0</div>

    <div class="slider"></div>
    <div class="value">0</div>

    <div class="slider"></div>
    <div class="value">0</div>

0
0
0

下面是javascript，它将创建滑块，并在移动滑块时向相应的滑块添加正确的值

    $(function () {
    var sliders = document.getElementsByClassName('slider');
    var slideval = document.getElementsByClassName('value');

    for (var i = 0; i < sliders.length; i++) {
        noUiSlider.create(sliders[i], {
            start: 0,
            connect: [true, false],
            range: {
                'min': 0,
                '10%': 1,
                '20%': 2,
                '30%': 3,
                '40%': 4,
                '50%': 5,
                '60%': 6,
                '70%': 7,
                '80%': 8,
                '90%': 9,
                'max': 10
            },
            snap: true,
        });


        sliders[i].noUiSlider.on('slide', function () {
            var allValues = [];
            for (var i = 0; i < sliders.length; i++) {

                // store values in array to pass through ajax...
                allValues.push(sliders[i].noUiSlider.get());

                // assign the slider value to the corresponding noUiSlider
                slideval[i].innerHTML = sliders[i].noUiSlider.get();
            };
        });
    }
});

$（函数（）{
var sliders=document.getElementsByClassName（'slider'）；
var slideval=document.getElementsByClassName（'value'）；
对于（变量i=0；i

这一款有效：

var sliders=document.getElementsByClassName（'sliders'）；
对于（变量i=0；i

---

嘿，谢谢你的建议。我们最终决定不使用滑块（UX原因），但我会将其存档，以防人们再次改变主意：）

    $(function () {
    var sliders = document.getElementsByClassName('slider');
    var slideval = document.getElementsByClassName('value');

    for (var i = 0; i < sliders.length; i++) {
        noUiSlider.create(sliders[i], {
            start: 0,
            connect: [true, false],
            range: {
                'min': 0,
                '10%': 1,
                '20%': 2,
                '30%': 3,
                '40%': 4,
                '50%': 5,
                '60%': 6,
                '70%': 7,
                '80%': 8,
                '90%': 9,
                'max': 10
            },
            snap: true,
        });


        sliders[i].noUiSlider.on('slide', function () {
            var allValues = [];
            for (var i = 0; i < sliders.length; i++) {

                // store values in array to pass through ajax...
                allValues.push(sliders[i].noUiSlider.get());

                // assign the slider value to the corresponding noUiSlider
                slideval[i].innerHTML = sliders[i].noUiSlider.get();
            };
        });
    }
});