Question

我正在尝试根据HTML5的范围滑块更新文本字段。这是我第一次使用范围类型，我无法理解正在发生的事情。

<!doctype html>

<html lang="en">
  <head>
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>


<script>
$('#chanceSlider').on('change', function(){
    $('#chance').val($('#chanceSlider').val());
});

$('#chance').on('keyup', function(){
    $('#chanceSlider').val($('#chance').val());
});
</script>

          </head>
  <body>

<input type="text" name="chance" id="chance" class="text" value="50">

<input type="range" id="chanceSlider" class="vHorizon" min="0.01" max="98" step="0.01" style="background-color: #00aec8; width: 50%;">




  </body>
</html>

这是我正在使用的代码。它最终将集成到另一个页面，但这对我不起作用。我已经查找了使用它的示例并提出了这段代码。不幸的是，它仍然不起作用，我对JQuery的理解不足以理解原因。如果你能告诉我如何修复和/或给我一个解释它为什么不起作用的解释，那就太好了。

提前致谢！

Answer 1

你需要将jquery代码包装在document ready函数中，因为在解析javascript时，html元素还不存在。

$( document ).ready(function() {
    $('#chanceSlider').on('change', function(){
        $('#chance').val($('#chanceSlider').val());
    });

    $('#chance').on('keyup', function(){
        $('#chanceSlider').val($('#chance').val());
    });
});

JQuery无法识别HTML输入类型范围内的移动

1 个答案: