Jquery滑块在按钮单击时更新滑块位置时停止滑动
Posted
技术标签:
【中文标题】Jquery滑块在按钮单击时更新滑块位置时停止滑动【英文标题】：Jquery slider stops sliding on updating the slider position on button click 【发布时间】：2017-02-26 20:50:52 【问题描述】：我正在尝试实现 jquery-ui-slider。我有一个文本框和更新按钮...每当用户单击更新按钮时，滑块拇指移动到文本框中指定的位置。但是，之后这样做滑块拇指停止滑动。为什么会这样？如何解决这个问题？ 我当前的代码是：
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
#slider margin: 20px;
</style>
<script>
$(document).ready(function ()
$("#slider").slider(
min: 0,
max: 100,
step: 1,
slide: showValue
);
$("#update").click(function ()
$("#slider").slider("option", "values", $("#seekTo").val());
);
function showValue(event, ui)
$("#val").html(ui.value);
);
</script>
</head>
<body>
<div id="slider"></div>
Seek To : <input id="seekTo" type="text" value="10" />
<input id="update" type="button" value="Update" />
Current Value : <span id="val">0</span>
</body>
</html>
【问题讨论】：
【参考方案1】：您应该设置value 而不是values：
$("#slider").slider("option", "value", $("#seekTo").val());
这是一个工作示例：
$(document).ready(function ()
$("#slider").slider(
min: 0,
max: 100,
step: 1,
slide: showValue
);
$("#update").click(function ()
$("#slider").slider("option", "value", $("#seekTo").val());
);
function showValue(event, ui)
$("#val").html(ui.value);
); #slider margin: 20px; <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<div id="slider"></div>
Seek To : <input id="seekTo" type="text" value="10" />
<input id="update" type="button" value="Update" />
Current Value : <span id="val">0</span>【讨论】：
以上是关于Jquery滑块在按钮单击时更新滑块位置时停止滑动的主要内容，如果未能解决你的问题，请参考以下文章