最小值不起作用

Posted

技术标签:

【中文标题】最小值不起作用【英文标题】:Minimum value not working 【发布时间】:2018-01-25 16:12:31 【问题描述】:

我为 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>

【问题讨论】:

您能否详细解释一下,以便我们更好地帮助您 您将相同的代码重复了 4 次,因为您有 4 个滑块。如果您有 100 个滑块,我认为您不会想要复制/粘贴 100 次相同的代码。 @JeremyThille 我只需要 2 个滑块 所以你的 JSfiddle 中有 2 个额外的。 @FaisalMehmoodAwan 我将“医疗费用”的最小值设置为 1(字段 1),将车辆损坏设置为 2(字段 2),将收入损失设置为 3(字段 3),将“租车费用”设置为 4(字段 4)。当我们运行脚本时:对于 field2、field3 和 field4 显示 field1 的最小值。当我们移动滑块时,最小值将正常工作。 【参考方案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);

【讨论】:

以上是关于最小值不起作用的主要内容,如果未能解决你的问题,请参考以下文章

为啥恐慌恢复以局部变量返回值不起作用?

当指针指向数组时,为啥 operator(*) 的值不起作用?

为啥链接元素中的媒体属性对打印值不起作用? [复制]

在角度 FormGroup 上设置值不起作用

Vue Array prop 默认值不起作用

RedBeanPHP:Find 中的值不起作用