我有一个jsfiddle,范围滑块工作正常,直到前一段时间。
不知道出了什么问题,并且找不到错误。
基本上它的6个范围滑块可以根据您定位滑块的位置产生总结果。
$(document).ready(function() {
$("#slider1").slider({
min: 0,
max: 100,
slide: function(event, ui) {
update();
}
});
$("#slider2").slider({
min: 0,
max: 250,
slide: function(event, ui) {
update();
}
});
$("#slider3").slider({
min: 0,
max: 100,
slide: function(event, ui) {
update();
}
});
$("#slider4").slider({
min: 0,
max: 100,
slide: function(event, ui) {
update();
}
});
$("#slider5").slider({
min: 0,
max: 100,
slide: function(event, ui) {
update();
}
});
$("#slider6").slider({
min: 0,
max: 100,
slide: function(event, ui) {
update();
}
});
update(); };
}),
function update() {
$("#amount").val($amount1);
$("#amount2").val($amount2);
$("#amount3").val($amount3);
$("#amount4").val($amount4);
$("#amount5").val($amount5);
$("#amount6").val($amount6);
$("#amount7").val($amount7);
$("#gbamount").val($gbamount);
$("#gbamount2").val($gbamount2);
$("#gbamount3").val($gbamount3);
$("#gbamount4").val($gbamount4);
$("#gbamount5").val($gbamount5);
$("#gbamount6").val($gbamount6);
$amount1 = $("#slider1").slider("values", 0);
$amount2 = $("#slider2").slider("values", 0);
$amount3 = $("#slider3").slider("values", 0);
$amount4 = $("#slider4").slider("values", 0);
$amount5 = $("#slider5").slider("values", 0);
$amount6 = $("#slider6").slider("values", 0);
$gbamount = ($amount1 * 3 / 1024).toFixed(2);
$gbamount2 = ($amount2 * 30 / 10240).toFixed(2);
$gbamount3 = ($amount3 * (1.43333333 * 30) / 1024).toFixed(2);
$gbamount4 = ($amount4 * (10 * 60) / 8 / 1024).toFixed(2);
$gbamount5 = ($amount5 * (30 * 60) / 8 / 1024).toFixed(2);
$gbamount6 = ($amount6 * (30 * 0.1666666667) / 1024).toFixed(2);
$amount7 = ($gbamount + $gbamount2 + $gbamount3 + $gbamount4 + $gbamount5 + $gbamount6).toFixed(2);
};
答案 0 :(得分:0)
您好请确保包含图书馆
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
点击这里
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#slider" ).slider();
});
</script>
</head>
<body>
<div id="slider"></div>
</body>
</html>
答案 1 :(得分:0)
这是更新的小提琴
http://jsfiddle.net/b7tqtwnL/4/
$(document).ready(function() {
function update() {
$amount1 = $("#slider1").slider("values", 0);
$amount2 = $("#slider2").slider("values", 0);
$amount3 = $("#slider3").slider("values", 0);
$amount4 = $("#slider4").slider("values", 0);
$amount5 = $("#slider5").slider("values", 0);
$amount6 = $("#slider6").slider("values", 0);
$gbamount = ($amount1 * 3 / 1024).toFixed(2);
$gbamount2 = ($amount2 * 30 / 10240).toFixed(2);
$gbamount3 = ($amount3 * (1.43333333 * 30) / 1024).toFixed(2);
$gbamount4 = ($amount4 * (10 * 60) / 8 / 1024).toFixed(2);
$gbamount5 = ($amount5 * (30 * 60) / 8 / 1024).toFixed(2);
$gbamount6 = ($amount6 * (30 * 0.1666666667) / 1024).toFixed(2);
console.log($gbamount + $gbamount2 + $gbamount3 + $gbamount4 + $gbamount5 + $gbamount6)
$amount7 = (Number($gbamount) + Number($gbamount2)+ Number($gbamount3) + Number($gbamount4) + Number($gbamount5) + Number($gbamount6)).toFixed(2);
$("#amount").val($amount1);
$("#amount2").val($amount2);
$("#amount3").val($amount3);
$("#amount4").val($amount4);
$("#amount5").val($amount5);
$("#amount6").val($amount6);
$("#amount7").val($amount7);
$("#gbamount").val($gbamount);
$("#gbamount2").val($gbamount2);
$("#gbamount3").val($gbamount3);
$("#gbamount4").val($gbamount4);
$("#gbamount5").val($gbamount5);
$("#gbamount6").val($gbamount6);
};
$("#slider1").slider({
min: 0,
max: 100,
slide: function(event, ui) {
update();
}
});
$("#slider2").slider({
min: 0,
max: 250,
slide: function(event, ui) {
update();
}
});
$("#slider3").slider({
min: 0,
max: 100,
slide: function(event, ui) {
update();
}
});
$("#slider4").slider({
min: 0,
max: 100,
slide: function(event, ui) {
update();
}
});
$("#slider5").slider({
min: 0,
max: 100,
slide: function(event, ui) {
update();
}
});
$("#slider6").slider({
min: 0,
max: 100,
slide: function(event, ui) {
update();
}
});
//update(); };
})