添加 .animate() 时滑块手柄会中断
我正在尝试构建一个使用数组中的数据的滑块控制的条形图。我已经成功地使用一些非常混乱的代码这里让它工作，但我做了一个更干净的版本此处 应该有效，但无效。实际上，就从数组捕获数据而言，它工作得很好，但是当我放入为框设置动画的代码时，它就中断了。然后滑块停止移动，并且只有当盒子中有实数时（即第 1 列），盒子才会产生动画。我只能发布两个链接，但如果您将该文件重命名为 Laborslider2_noslide.html，您可以看到带有工作滑块的版本。
让我困惑的是，尽管滑块手柄损坏了，但数字仍然传递给变量（column1、column2 和 column3），并且其中包含实数的框会动画化，但没有一个变量框会这样做一件事。我不明白为什么会这样。
我是 jquery 的新手，所以这可能是非常愚蠢的事情。希望这真的是愚蠢的事情。 ;）
这是我的代码：
<!DOCTYPE html>
<html class="no-js">
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>-->
<script type="text/javascript" src="http://img.seiu.org/js/custom-link-tracking.js"></script>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
var updateSizes = function (s) {
var column1 = s[0];
var column2 = s[1];
var column3 = s[2];
return "Column 1: " + column1 + ", Column 2: " + column2 + ", Column 3: " + column3;
},
laborData = Array(14);
laborData[0] = [100, 6, 38];
laborData[1] = [300, 6.5, 38.5];
laborData[2] = [500, 7, 39];
laborData[3] = [6.5, 7.5, 40];
laborData[4] = [7, 8, 40.5];
laborData[5] = [8, 9, 42];
laborData[6] = [8.5, 9.5, 42.5];
laborData[7] = [9, 10, 43];
laborData[8] = [9.5, 10.5, 44];
laborData[9] = [10, 11, 44.5];
laborData[10] = [10.5, 11.5, 45];
laborData[11] = [11, 12, 46];
laborData[12] = [11.5, 12.5, 46.5];
laborData[13] = [12, 13, 47];
$("#slider").slider({
range: "max",
min: 0,
max: 13,
step: 1,
slide: function (event, ui) {
$("#amount").val(updateSizes(laborData[ui.value]));
$("#box").animate({"height":300});
$("#box2").animate({"height":column2});
$("#box3").animate({"height":column3});
}
});
// $("#slider-men").slider({
// range: "max",
// min: 0,
// max: 13,
// step: 1,
// slide: function (e, ui) {
// $("#amount-men").val(updateSizes(laborData[ui.value]));
// }
// });
});
</script>
</head>
<body>
<div id="slider"></div>
<label for="amount">Data:</label> <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;width:300px;" />
<p>
<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px; float: left;">
</div>
<div id="box2" style="background:#98bf21;height:100px;width:100px;margin:6px; float: left;">
</div>
<div id="box3" style="background:#98bf21;height:100px;width:100px;margin:6px; float: left;">
</div>
</body>
</html>
所以是的。任何帮助都会很棒。我很困惑。
I'm trying to build a slider-controlled bargraph that uses data from arrays. I've managed to get it working using some really messy code here, but I made a much cleaner version here that should work but doesn't. Actually, it works perfectly as far a capturing data from the arrays, but it breaks when I put in the code that animates the boxes. Then the slider stops moving and the boxes only animate if they have a real number in them (i.e. column 1). I can only post two links, but you can see a version with a working slider if you rename that file to laborslider2_noslide.html.
The thing that confuses me is that, despite the broken slider-handle, the numbers ARE getting passed to the variables (column1, column2, and column3), and the box with a real number in it animates, but none of the variable boxes do a thing. I don't see why that would be.
I'm new to jquery, so it could be something really dumb. Hopefully it's something really dumb. ;)
Here's my code:
<!DOCTYPE html>
<html class="no-js">
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>-->
<script type="text/javascript" src="http://img.seiu.org/js/custom-link-tracking.js"></script>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
var updateSizes = function (s) {
var column1 = s[0];
var column2 = s[1];
var column3 = s[2];
return "Column 1: " + column1 + ", Column 2: " + column2 + ", Column 3: " + column3;
},
laborData = Array(14);
laborData[0] = [100, 6, 38];
laborData[1] = [300, 6.5, 38.5];
laborData[2] = [500, 7, 39];
laborData[3] = [6.5, 7.5, 40];
laborData[4] = [7, 8, 40.5];
laborData[5] = [8, 9, 42];
laborData[6] = [8.5, 9.5, 42.5];
laborData[7] = [9, 10, 43];
laborData[8] = [9.5, 10.5, 44];
laborData[9] = [10, 11, 44.5];
laborData[10] = [10.5, 11.5, 45];
laborData[11] = [11, 12, 46];
laborData[12] = [11.5, 12.5, 46.5];
laborData[13] = [12, 13, 47];
$("#slider").slider({
range: "max",
min: 0,
max: 13,
step: 1,
slide: function (event, ui) {
$("#amount").val(updateSizes(laborData[ui.value]));
$("#box").animate({"height":300});
$("#box2").animate({"height":column2});
$("#box3").animate({"height":column3});
}
});
// $("#slider-men").slider({
// range: "max",
// min: 0,
// max: 13,
// step: 1,
// slide: function (e, ui) {
// $("#amount-men").val(updateSizes(laborData[ui.value]));
// }
// });
});
</script>
</head>
<body>
<div id="slider"></div>
<label for="amount">Data:</label> <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;width:300px;" />
<p>
<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px; float: left;">
</div>
<div id="box2" style="background:#98bf21;height:100px;width:100px;margin:6px; float: left;">
</div>
<div id="box3" style="background:#98bf21;height:100px;width:100px;margin:6px; float: left;">
</div>
</body>
</html>
So yeah. Any help would be great. I'm stumped.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您必须在全局范围内定义
column1/2/3变量，因为您要在一个函数中设置它并在另一个函数中访问它。我已经设置了一个小提琴并修复了它，你看一下。我相信你希望盒子动画是并行的，所以我将盒子动画的排队设置为 false
工作 演示
You have to define the
column1/2/3variables in the global scope because you are setting it in one function and accessing it in another function.I have set up a fiddle and fixed it, take a look. I believe you want the box animation to be in parallel so I have set the queuing of box animation to false
Working demo
在我看来，您是在您自己的脚本之后导入 jQuery。这将导致原始脚本无法开始初始化。至少您提供的链接（干净版本）是这种情况。
It seems to me that you're importing jQuery AFTER your own script. This will result in the orginal script not begin able to initialize. This is at least the case at the link you provided (the clean version).