2013-11-28 51 views
0

我想通了如何設置(在這種情況下1-99)固定最大滑塊數字JS滑蓋計算

現在什麼,我試圖做的是配合另一個單獨的功能成其計算節約。基本上,它是計算滑塊數x 1.8(保存)×365(天),或:

X(slider變量)* Y * Z

的問題是我不能讓X挑向上滑動值

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI Slider - Range with fixed maximum</title> 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 

<script> 
$(function() { 
$("#slider-range-max").slider({ 
    range: "max", 
    min: 1, 
    max: 99, 
    value: 2, 
    slide: function(event, ui) { 
    $("#amount").val(ui.value); 
    } 
    }); 
    $("#amount").val($("#slider-range-max").slider("value")); 

    }); 

$(function() { 
{ 
x=20; /* This is the variable #amount */ 
y=.8; 
z=365; 
a=x*y*z; 
document.getElementById("product").innerHTML=a; 
} 

}); 


</script> 


</head> 
<body> 

<p> 
<label for="amount">Per Day:</label> 
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;"> 
</p> 
<div id="slider-range-max"></div> 
<br/> 

<p id="result"> 
You save $<span id="product"></span> 
</p> 

</body> 
</html> 

我只是把X = 20,以確保計算的作品,它的作用。

回答

0

如果我很好地理解了您的問題,您想在更改滑塊值後進行計算,那麼您希望在滑塊的「滑動」事件內使用該calc,並使用一些jquery功能將不需要你的代碼的第二塊,腳本塊將是這樣的:

$(function() { 
$("#slider-range-max").slider({ 
    range: "max", 
    min: 1, 
    max: 99, 
    value: 2, 
    slide: function(event, ui) { 
    $("#amount").val(ui.value); //ui.value inside the event contains the slider value 
    var x=$("#amount").val(); //this way you access slider value anywhere in your code 
    var y=.8; 
    var z=365; 
    var a=x*y*z; 
    $("#product").html(a); 
    } 
}); 
    $("#amount").val($("#slider-range-max").slider("value")); 

}); 
+0

完美 - 現在我可以看到它的更多意義。非常感謝 – user3044534