jquery - 范围滑块:jQuery 更改值但滑块不移动
问题描述
我运行以下程序:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Slider </title>
<!-- jQuery CDN https://code.jquery.com/ -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript"src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(document).ready(function() {
console.debug("jQuery "+ (jQuery ? $().jquery : "NOT") +" loaded"); // jQuery version to console
$('#slider1').slider({value: "11"}); // initialize slider
$("#slider1").slider("option", "value", 2);
$("#slider1" ).slider("value", 3 );
var value = $( "#slider1" ).slider( "option", "value"); // show slider value
$('#sliderVal').text("Slider Value: "+value);
$('#slider1').on('input', function(event) { // show slider value when changed
var valSlider1 = $(this).attr('id') +" Value:" +$(this).val();
$('#sliderVal').text(valSlider1);
});
});
</script>
</head>
<body>
<p> Slider </p>
<input type="range" class="sl" id="slider1" min="0" max="100" value="99">
<p id="sliderVal">...</p //display value of slider
</body>
</html>
运行程序后,滑块的“拇指”仍然停留在 99 输出(id=sliderVal;倒数第二行)说:滑块值:3
我试过
$('#slider1').slider({value: "11"});
$("#slider1").slider("option", "value", 2);
$("#slider1" ).slider("value", 3 );
它们都改变了滑块的值,但滑块拇指从不移动。当我用鼠标移动滑块的拇指时,会显示正确的值
解决方案
就val()
这样改$("#slider1").val(2);
$(document).ready(function() {
$("#slider1").val(11);
var value = $("#slider1").val();
$('#sliderVal').text("Slider Value: " + value);
$('#slider1').on('input', function(event) {
var valSlider1 = $(this).attr('id') + " Value:" + $(this).val();
$('#sliderVal').text(valSlider1);
});
});
$('#change').click(function() {
$("#slider1").val(2);
$('#sliderVal').text("Slider Value: 2");
});
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p> Slider </p>
<input type="range" class="sl" id="slider1" min="0" max="100" value="99">
<p id="sliderVal">
</p>
<button id="change">Change</button>
推荐阅读
- c++ - 使用 ATL 进行 COM 枚举时按需获取数据
- vba - Outlook VBA 不关闭字处理
- python - Python:有时打印整个数组而不是单个单词
- google-sheets - 谷歌表格 - 返回包含值的所有行的范围
- javascript - JQuery自动完成,更改搜索子字符串
- .htaccess - 使用 .htaccess 限制对文件的直接 URL 访问
- node.js - 在 Echo Show 上循环播放视频
- java - Java:awt 侦听器中的抽象方法是否称为回调方法?
- sql-server-2008 - 如何水平(连续)显示列值并在其周围显示一些文本?
- javascript - 如何在Javascript中填充默认下拉菜单