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

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 に答える