10

我在一个有几十个滑块的表单上使用 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] 显然不会在那里工作。我可能遗漏了一些明显的东西？谢谢！

4

3 回答 3

14

我今天也偶然发现了同样的问题，我使用了以下代码。

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

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

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);
}
于 2015-08-12T15:30:51.990 回答
0

这是一个允许您在同一页面上拥有多个 noUiSlider 和滑块值的工作模型。

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

这是将创建滑块并在滑块移动时将正确值添加到相应滑块的 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();
            };
        });
    }
});
于 2016-10-20T19:53:00.380 回答
0

这个有效：

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>

于 2016-12-22T09:53:13.947 回答