Question

我有一些代码循环遍历一个类，并为每个类创建一个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>

Answer 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以获取工作示例。

遍历类并创建noUisliders

1 个答案: