Question

我在表格上使用noUiSlider（http://refreshless.com/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 *****
    });
}

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

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

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

希望这也对你有用。

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

Answer 2

Here is a working model that will allow you to have multiple noUiSliders and slider values on the same page.

Here is the html for 3 sliders. You can include as many as you like.

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

Here is the javascript that will create the sliders and add the correct value to the corresponding slider when the slider is moved.

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

Answer 3

这个有效：

var sliders = document.getElementsByClassName('sliders');

for ( var i = 0; i < sliders.length; i++ ) {

    noUiSlider.create(sliders[i], {
        start: 10,
        step: 1,
        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++) {
        allValues.push(sliders[i].noUiSlider.get());
    };
    
    for (var j = 0; j < allValues.length; j++) {
    document.getElementsByClassName('slider-value')[j].innerHTML = allValues[j];
    }

}

<div class="slider-value"></div>
<div class="sliders"></div>
<div class="slider-value"></div>
<div class="sliders"></div>
<div class="slider-value"></div>
<div class="sliders"></div>
<div class="slider-value"></div>
<div class="sliders"></div>

noUiSlider：创建多个

3 个答案: