添加 .animate() 时滑块手柄断裂
2011-08-19
177
我正在尝试构建一个使用数组数据的滑块控制条形图。我设法使用一些非常混乱的代码 此处 使其工作，但我制作了一个更简洁的版本 此处 ，它应该可以工作，但实际上却不行。实际上，就从数组捕获数据而言，它工作得很好，但当我输入动画框的代码时，它就中断了。然后滑块停止移动，并且框只有在其中有实数（即第 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>
所以是的。任何帮助都很好。我被难住了。
2个回答
您必须在全局范围内定义
column1/2/3
变量，因为您在一个函数中设置它，并在另一个函数中访问它。
我已经设置了一个小提琴并修复了它，请看一下。我相信您希望框动画并行，所以我将框动画的排队设置为 false
工作 演示
ShankarSangoli
2011-08-19
在我看来，您在您自己的脚本之后导入了 jQuery。这将导致原始脚本无法初始化。至少在您提供的链接（干净版本）中是这种情况。
Exelian
2011-08-19