rangelider.js - не потянув правильное значение в jquery

Question

Я использую rangeslider.js, чтобы скрыть или показать изображения в зависимости от того, находится ли значение в ведре (на данный момент, выше или ниже 1500), и я получаю странное ответ.

Мой слайдер настроен так:

<input id="sliderone" 
    type="range" 
    min="0"  // default 0 
    max="3000" // default 100 
    step="1"  // default 1 
    value="300" // default min + (max-min)/2 
> 

Мой браузер как этот

var sliders = document.querySelectorAll('input[type=range]'); 
var result = document.getElementById('js-result'); 
var values = getValues(sliders); 

$(sliders).rangeslider({ 
    polyfill: false 
}).on('change', function() { 
    var values = getValues(sliders); 
    updateResult(result, values); 
    console.log(values); 
}); 

$(sliders).rangeslider({ 
    polyfill: false 
}).on('change', function() { 
    var values = getValues(sliders); 
    updateResult(result, values); 
    console.log(values); 
}); 

updateResult(result, values); 

function newchangepic1() { 
    var newvalue = values[0]; 
    console.log(newvalue); 

    if (newvalue < 1500) { 
      $(".img-one").attr("src","images/travel.png"); 
    } else if (newvalue > 1500) { 
      $(".img-one").attr("src","images/plant-color.png"); 
    } 
} 

function newchangepic3() { 
    var newvalue = values[1]; 
    console.log(newvalue); 

    if (newvalue < 1500) { 
     $(".img-two").attr("src","images/hdb.png"); 
    } else if (newvalue > 1500) { 
     $(".img-two").attr("src","images/plane.png"); 
    } 
} 

Когда я делаю

console.log(values); 

Он печатает мой массив, как ожидается, обновление с каждое движение.

var newvalue = values[0]; 
console.log(newvalue); 

Но когда я пытаюсь прочитать одно из значений внутри массива я получаю 300. начальное значение я устанавливаю в HTML.

Я не могу понять, почему это происходит, но я плохо кодирую, поэтому, вероятно, что-то не хватает.

Любая помощь?

Answer 1

var values = getValues(sliders); 

$(sliders).rangeslider({ 
    polyfill: false 
}).on('change', function() { 
    values = getValues(sliders); //<--------- 
    updateResult(result, values); 
    console.log(values); 
}); 

$(sliders).rangeslider({ 
    polyfill: false 
}).on('change', function() { 
    values = getValues(sliders);//<--------- 
    updateResult(result, values); 
    console.log(values); 
}); 

Возможно, вы не должны объявлять локальные значения переменных, если вы собираетесь использовать глобальный массив для хранения последних значений.

Answer 2

Я рассмотрел rangeslider.js. Из его API похоже, что правильным способом является использование обработчика изменений onSlide, и вы должны обновить любую глобальную локальную переменную этим методом. См. JsFiddle Sample, где я обновил глобальную переменную slideValue на основе события изменения слайдов.

Парциальный код свыше jsfiddle:

$(document).ready(function() { 
    var sliders = document.querySelectorAll('input[type=range]'); 
    var result = document.getElementById('js-result'); 

    var slideValue; // This global value gets updated with each slide event 

    $(sliders).rangeslider({ 
     polyfill: false, 

     // Handle the slide change event and update value accordingly 
     onSlide: function(pos, value) { 
      slideValue = value; 
      console.log('Value updated to ', value); 
     } 
    }); 
}); 

Дайте нам знать, если это работает для вас или нет.