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

标签 javascript jquery html knockout.js

我试过下面的代码:

<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/

相关文章:

php - 如何使用$_POST获取通过AJAX和Jquery传递的数据?

html - 如何在不换行的情况下制作带有文本溢出省略号的流体宽度标题?

javascript - jQuery 未触发

javascript - 用于验证和 es 6 的 Gulp 工作流

javascript - CSS 背景位置随页面大小调整而移动

javascript - 尝试打开事务时使用react-native-sqlite-storage停止

javascript - 创建我自己的回调

javascript - 如何在不重新加载 Java Script 的情况下重新加载网页?

javascript - 实时轮询背后的技术

javascript - 类型错误 : $(. ..)。不是函数