Question

经过多次尝试，我寻求帮助。我有这个滑块

<input autocomplete="off" type="range" min="0" max="100" value="50" class="myslider" id="mysliderID-slider" data-fieldid="something">
<input type="text" class="mysliderinput" name="myname" id="mysliderID" value="0">

现在我要使用此代码重置此滑块

$('#mysliderID').val(0);
$('#mysliderID').attr('value',0);
$('#mysliderID-slider').val(0);
$('#mysliderID-slider').attr('value',0);

源代码中的value字段将重置为0，但是滑块本身位于旧位置，并且在输入字段中我已经看到了旧值。

是什么原因造成的或我做错了什么？

非常感谢

Answer 1

第$('#mysliderID').attr(0);行将导致错误：

TypeError：name.toLowerCase不是函数

有关如何使用.attr()的信息，请参见http://api.jquery.com/attr/

工作示例：

http://jsfiddle.net/5mhywjva/1/

$('#button').on('click', function() {
    $('#mysliderID').val(0);
    $('#mysliderID-slider').val(0);
});

<input autocomplete="off" type="range" min="0" max="100" value="50" class="myslider" id="mysliderID-slider" data-fieldid="something">
<input type="text" class="mysliderinput" name="myname" id="mysliderID" value="10">

<button id="button">
Reset
</button>

Answer 2

您可以使用滑块上的onchange事件更新文本框<input autocomplete="off" type="range" min="0" max="100" value="50" class="myslider" id="mysliderID-slider" data-fieldid="something" onchange="update()">

的值

function update() {
    $('#mysliderID').attr('value',$('#mysliderID-slider').val());
}

重置html5滑块失败

2 个答案: