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

您可能不应声明本地变量＆＃39;值＆＃39;如果您打算使用全局数组来存储最新值。

Answer 2

我查看了rangeslider.js。从它的API看来，正确的方法是使用onSlide更改处理程序，您应该使用此方法更新任何全局局部变量。请参阅我根据幻灯片更改事件更新全局变量slideValue的{{3}}。

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中提取正确的值

2 个答案: