скрипт калькулятора
Существует 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> |
Часовой пояс GMT +3, время: 02:29. |