Существует jQuery плагин калькулятор
http://www.pengoworks.com/workshop/j...ion.plugin.htm
по этой сылке есть рабочий пример
я бы хотел попросить помочь
как сделать чтобы переменная price зависила от переменной qty?
смысл подсчёта qty*price
эти переменные берутся input`ом
function recalc(){
$("[@id^=total_item]").calc(
// the equation to use for the calculation
"qty * price",
// define the variables used in the equation, these can be a jQuery object
{
qty: $("input[@name^=qty_item_]"),
price: $("[@id^=price_item_]")
},
а мне хотелось бы видеть все это в виде
if (qty<5) {price=2}
else if (qty>7) {price=1}
else {price=0}
рабочий кусок
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery Calculation Plug-in</title>
<script type="text/javascript" src="http://www.pengoworks.com/workshop/jquery/calculation/jquery-1.2.1.js"></script>
<!--// load jQuery Plug-ins //-->
<script type="text/javascript" src="http://www.pengoworks.com/workshop/jquery/calculation/jquery.calculation.js"></script>
<script type="text/javascript">
var bIsFirebugReady = (!!window.console && !!window.console.log);
$(document).ready(
function (){
// update the plug-in version
$("#idPluginVersion").text($.Calculation.version);
/*
$.Calculation.setDefaults({
onParseError: function(){
this.css("backgroundColor", "#cc0000")
}
, onParseClear: function (){
this.css("backgroundColor", "");
}
});
*/
// bind the recalc function to the quantity fields
$("input[@name^=qty_item_]").bind("keyup", recalc);
// run the calculation function now
recalc();
// automatically update the "#totalSum" field every time
// the values are changes via the keyup event
$("input[@name^=sum]").sum("keyup", "#totalSum");
// automatically update the "#totalAvg" field every time
// the values are changes via the keyup event
$("input[@name^=avg]").avg({
bind:"keyup"
, selector: "#totalAvg"
// if an invalid character is found, change the background color
, onParseError: function(){
this.css("backgroundColor", "#cc0000")
}
// if the error has been cleared, reset the bgcolor
, onParseClear: function (){
this.css("backgroundColor", "");
}
});
// automatically update the "#minNumber" field every time
// the values are changes via the keyup event
$("input[@name^=min]").min("keyup", "#numberMin");
// automatically update the "#minNumber" field every time
// the values are changes via the keyup event
$("input[@name^=max]").max("keyup", "#numberMax");
// this calculates the sum for some text nodes
$("#idTotalTextSum").click(
function (){
// get the sum of the elements
var sum = $(".textSum").sum();
// update the total
$("#totalTextSum").text("$" + sum.toString());
}
);
// this calculates the average for some text nodes
$("#idTotalTextAvg").click(
function (){
// get the average of the elements
var avg = $(".textAvg").avg();
// update the total
$("#totalTextAvg").text(avg.toString());
}
);
}
);
function recalc(){
$("[@id^=total_item]").calc(
// the equation to use for the calculation
"qty * price",
// define the variables used in the equation, these can be a jQuery object
{
qty: $("input[@name^=qty_item_]"),
price: $("[@id^=price_item_]")
},
// define the formatting callback, the results of the calculation are passed to this function
function (s){
// return the number as a dollar amount
return "$" + s.toFixed(2);
},
// define the finish callback, this runs after the calculation has been complete
function ($this){
// sum the total of the $("[@id^=total_item]") selector
var sum = $this.sum();
$("#grandTotal").text(
// round the results to 2 digits
"$" + sum.toFixed(2)
);
}
);
}
</script>
<style type="text/css">
#testForm {
width: 800px;
}
code {
background-color: #e0e0e0;
}
#formContent p {
clear: both;
min-height: 20px;
}
#idCheckboxMsg{
color: red;
font-weight: bold;
}
#totalTextSum,
.textSum,
#totalTextAvg,
.textAvg {
border: 1px solid black;
padding: 2px;
}
</style>
</head>
<body>
<table width="500">
<col style="width: 50px;" />
<col />
<col style="width: 60px;" />
<col style="width: 110px;" />
<tr>
<th>
Qty
</th>
<th align="left">
Product
</th>
<th>
Price
</th>
<th>
Total
</th>
</tr>
<tr>
<td align="center">
<input type="text" name="qty_item_1" id="qty_item_1" value="1" size="2" />
</td>
<td>
<a href="http://www.packtpub.com/jQuery/book">Learning jQuery</a>
</td>
<td align="center" id="price_item_1">
$39.99
</td>
<td align="center" id="total_item_1">
$39.99
</td>
</tr>
<tr>
<td align="center">
<input type="text" name="qty_item_2" id="qty_item_2" value="1" size="2" />
</td>
<td>
<a href="http://jquery.com/">jQuery Donation</a>
</td>
<td align="center" id="price_item_2">
$14.99
</td>
<td align="center" id="total_item_2">
$14.99
</td>
</tr>
<tr>
<td colspan="3" align="right">
<strong>Grand Total:</strong>
</td>
<td align="center" id="grandTotal">
</td>
</tr>
</table>
</div>
</fieldset>
</form>
<!--
|input[@name^=qty]| * |input[@name^=price]|
-->
</body>
</html>
