0
배열의 데이터를 사용하는 슬라이더 제어 막대 그래프를 작성하려고합니다. 나는 그다지 지저분한 코드 인 here을 사용하여 작동 시키려고했지만, 더 깨끗한 버전 인 here을 만들었지 만 그렇게하지는 않았다. 사실, 배열에서 데이터를 캡처하는 데 완벽하게 작동하지만, 상자에 애니메이션을 적용하는 코드를 넣을 때 중단됩니다. 그런 다음 슬라이더가 움직이지 않고 상자에 실제 숫자 (예 : 1 열)가있는 경우에만 상자가 움직입니다. 두 개의 링크 만 게시 할 수 있지만 해당 파일의 이름을 laborslider2_noslide.html로 변경하면 작동하는 슬라이더가있는 버전을 볼 수 있습니다..animate()를 추가 할 때 슬라이더 핸들이 끊어집니다.
나를 혼란스럽게하는 것은 깨진 슬라이더 핸들에도 불구하고 숫자가 변수 (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>
그래. 어떤 도움이라도 좋을 것입니다. 나는 혼란 스럽다.
+1, 당신은 나를 때렸다. – stealthyninja
@stealthyninja - 더 나은 행운 다음 시간 :) – ShankarSangoli
AAsdnsadhkfgfdjsd! 당연하지! 와, 저것은 아주 명백하다. 아하하, 고마워! 이제 애니메이션을 위로 움직이는 방법을 알아 내야합니다. – Sariel