我试过下面的代码:
<input type="range" id="slider1" min="0" max="6" step="1" value="1">
<output id="output"></output>
var values = [2, 4, 8, 16, 32, 64, 128];
$('#slider1').change(function () {
$('.slider #slider1').attr('value', values[this.value]);
memoryslider = $('input[id="slider1"]').attr('value');
var data = document.getElementById("output");
data.innerText = memoryslider;
});
这工作正常但是在鼠标点击后显示出来了,但是我想在鼠标移动时输出值,有没有可能请帮助我..
最佳答案
要在拖动范围时更新 #output
元素,您应该使用 input
事件。您也不应该在输入更改时手动更改 value
属性。试试这个:
var values = [2, 4, 8, 16, 32, 64, 128];
$('#slider1').on('change input', function() {
var value = values[this.value];
$("#output").text(value);
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="range" id="slider1" min="0" max="6" step="1" value="1">
<output id="output"></output>
另请注意,由于您的所有值都是 2 的幂,因此您可以使用 Math.pow()
方法而不是将值硬编码到数组中:
$('#slider1').on('change input', function() {
var value = Math.pow(2, +this.value + 1);
$("#output").text(value);
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="range" id="slider1" min="0" max="6" step="1" value="1">
<output id="output"></output>
关于javascript - 如何使用 JavaScript/Jquery/Knockout JS 将数字数组绑定(bind)到范围 slider ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36622327/