rangeslider.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
>

我的javascript是这样的

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);
});

如果您打算使用全局数组存储最新值，您可能不应该声明局部变量'values'。

Answer 2

我查看了 rangeslider.js. From it's API it looks like the correct way is to use the onSlide change handler and you should update any global, local variable with this method. See the 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);
        }
    });
});

让我们知道这是否适合您。

rangeslider.js - 没有在 jquery 中提取正确的数值

rangeslider.js - not pulling correct value number in jquery

javascript

jquery

rangeslider