javascript - 如何使用 JavaScript/Jquery/Knockout JS 将数字数组绑定(bind)到范围 slider

Question

我试过下面的代码:

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

这工作正常但是在鼠标点击后显示出来了，但是我想在鼠标移动时输出值，有没有可能请帮助我..

Answer 1

要在拖动范围时更新 #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>