循环遍历类并创建 noUislider答案

【问题标题】：Loop through class and create noUisliders循环遍历类并创建 noUislider
【发布时间】：2019-02-28 02:44:59
【问题描述】：

我有一些代码循环遍历一个类并为每个类创建一个noUiSlider。

我正在尝试使 noUi 滑块的值可点击（设置值），但它不起作用，我只能让最后一个滑块工作。

javascript：

var sliders = $('.create-sliders');
for ( var i = 0; i < sliders.length; i++ ) {

    noUiSlider.create(sliders[i], {
        start: [ 0 ],
        range: {
            // start at 0 and end at 1000
            min: 0,
            max: 180
        },
        behaviour: 'snap',  
        connect: [true, false],
        //set values that are clickable
        pips: { mode: 'values', values: [0, 30, 60, 90, 120, 150, 180] 
        },
    });
    sliders[i].noUiSlider.on('slide', addValues);
    let values = sliders[i].getElementsByClassName('noUi-value');
    for(let val of values){
        var testSlider = sliders[i];
        val.pip = val.innerHTML;
        val.style.cursor = 'pointer';
        val.onclick = (e) => {
            testSlider.noUiSlider.set(val.pip);
        }
    }
}

function addValues(){
    var allValues = [];
}

HTML：

<div class="create-sliders"></div> 
<div class="create-sliders"></div> 
<div class="create-sliders"></div>

【问题讨论】：

嗨@hani，只是想清楚地知道你想做什么？
检查我的答案，如果能解决您的问题，请务必将其标记为答案。
Wel @SilentCoder 我尝试了你的解决方案，但我得到了下一个错误：Uncaught TypeError: Cannot read property 'noUiSlider' of undefined
你在哪里得到错误？在哪一行？你检查我的小提琴链接了吗？
@SilentCoder 是的，我做到了！当我单击一个值时，我只是收到错误： main.js:276 Uncaught TypeError: Cannot read property 'noUiSlider' of undefined at HTMLDivElement. (main.js:276) at HTMLDivElement.dispatch (jquery.min. js:2) 在 HTMLDivElement.y.handle (jquery.min.js:2)

标签： javascript jquery html nouislider

【解决方案1】：

我稍微更改您的JS 代码并添加样式以获取光标。

var sliders = $('.create-sliders');
for ( var i = 0; i < sliders.length; i++ ) {

    noUiSlider.create(sliders[i], {
        start: [ 0 ],
        range: {
            // start at 0 and end at 1000
            min: 0,
            max: 180
        },
        behaviour: 'snap',  
        connect: [true, false],
        //set values that are clickable
        pips: { mode: 'values', values: [0, 30, 60, 90, 120, 150, 180] 
        },
    });
    sliders[i].noUiSlider.on('slide', addValues);

}

$('.noUi-value').click(function(){
      var selectedSliderIndex = $(this).parents('.create-sliders').index();
    var value = Number($(this).data('value'));
    sliders[selectedSliderIndex].noUiSlider.set(value);
});

function addValues(){
    var allValues = [];
}

检查此fiddle 以获取工作示例。

【讨论】：