Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.09.2008, 18:44
krIvo
 
Сообщений: n/a

скрипт калькулятора
Существует 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>

Последний раз редактировалось Андрей Параничев, 25.09.2008 в 21:57. Причина: Пожалуйста пользуйтесь bb-кодами [html] и [js] для оформления листингов html и js кода в теле сообщения
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Скрипт для Контакта.ру Black - C Элементы интерфейса 3 06.04.2011 22:03
Скрипт не работает в опере, работает в IE XpycTuk Общие вопросы Javascript 9 06.03.2009 15:50
Скрипт "меняющееся фото" и его отражение в Мозилле osp Firefox/Mozilla 1 10.09.2008 14:11
Не работает скрипт в IE Gena Internet Explorer 0 28.08.2008 14:27
добавление окошка в скрипт подсчета слов Гость Общие вопросы Javascript 10 11.03.2008 17:07