0

Пытаюсь проинициализировать noUiSlider в цикле. Сам слайдер имеет систему событий и функции жестко определены, функция не позволяет передавать идентификатор слайдера в тело события, и я беру идентификатор из цикла. Проблема заключается в том, что все проинициализированные обработчики событий работают с последним проинициализированным в цикле идентификатором.

curSlider.noUiSlider.on('update', function(values, handle) {
  //обработка событий
})

Инициализируем объект:

$shopfilter.filter = [
    {
        'sliderId': 'filter-price',
        'fromId':   'filter-price-from',
        'toId':     'filter-price-to'
    },
    {
        'sliderId': 'filter-power',
        'fromId':   'filter-power-from',
        'toId':     'filter-power-to'
    }
];

Сам код:

$shopfilter.initSliders = function() {
    for (var i=0; i<$shopfilter.filter.length; i++) {
        var filter = $shopfilter.filter[i];

        var curSlider = $utils.findElementById(filter['sliderId']); 
        var curSlider_from = $utils.findElementById(filter['fromId']);  
        var curSlider_to   = $utils.findElementById(filter['toId']);     
        var curInputs = [curSlider_from, curSlider_to];

        //инициализируем слайдер
        noUiSlider.create(curSlider, {<ничего интересного>});

        curSlider.noUiSlider.on('update', function(values, handle) {
            //вот тут проблема
            //несмотря на то, что функиция анонимная
            //все curInputs указывают на тот, что был проинициализирован в последнем цикле
            curInputs[handle].value = Math.round(values[handle]);
        });

    }
};

Удалось решить проблему вот так, но решение выглядит костыльным.

var initSliderUpdate = function(curInputs) {
    curSlider.noUiSlider.on('update', function(values, handle) {    
        //вот сейчас все работает
        curInputs[handle].value = Math.round(values[handle]);
    });
};
initSliderUpdate(curInputs);
Bharatha
  • 5,264

0 Answers0