最低值无效

时间:2017-08-17 09:49:58

标签: javascript jquery html css minimum

我为4件事设定了最小值,但我遇到了问题。所有4件事物都具有最低价值。当我们移动滑块时,一切都恢复正常并正常工作。问题在哪里?

链接:https://jsfiddle.net/57nv61a1/



 $('#field2').rangeslider({
        polyfill:false,
        onInit:function(){
        
            $('#input2').val($('input[type="range"]').val());
        },
        onSlide:function(position, value){
            $('.content #input2').val(value);
        },
        onSlideEnd:function(position, value){
        }
    });
    // Change the value of input field when slider changes
    $('#field2').on('input', function() {
        $('#input2').val(this.value);
        console.log('$'+$('#input2').val());
    });
    // Change the value of slider field when input changes
    $('#input2').on('input', function() {
        if (this.value.length == 0) $('#field2').val(0).change();

        $('#field2').val(this.value).change();
    });

<label for="medical-expenses">Medical Expenses</label>
<span class="label1">$ <input type="number" id="input1" min="1" max="10000"></input></span>
<input id="field1" name="field1" type="range" min="1" max="10000" value="0" data-rangeslider>

<label for="vehicle-damage">Vehicle Damage</label>
<span class="label2">$ <input type="number" id="input2" min="2" max="10000"></input></span>
<input id="field2" name="field2" type="range" min="2" max="10000" value="0" data-rangeslider>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

这一行:

$('#input4').val($('input[type="range"]').val());

选择所有input[type="range"],获取第一个的值,然后将其分配给$('#input4')

由于您复制/粘贴了相同的代码4次,因此每个输入都会使用相同的值进行初始化,即1。

$('#input1').val($('input[type="range"]').val());
$('#input2').val($('input[type="range"]').val());
$('#input3').val($('input[type="range"]').val());
$('#input4').val($('input[type="range"]').val());

开始移动滑块然后返回到开头时,值会更改,然后适用相应的最小值(1,2,3,4)。

解决方案虽然仍然非常不优雅,但却是手动分配正确的初始值:

$('#input1').val(1);
$('#input2').val(2);
$('#input3').val(3);
$('#input4').val(4);