Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 31.10.2017, 10:14
Профессор
Отправить личное сообщение для the_little Посмотреть профиль Найти все сообщения от the_little
 
Регистрация: 25.09.2017
Сообщений: 186

Запуск одной функции при нескольких .change
Всем привет.
Столкнулся с такой проблемой.

Есть поле (количество).
Значение этого поля меняется 2-мя способами.

1 Вариант.
Есть функция (запуск при изменении другого поля), которая передает в это поле некоторое значение.
Далее производятся вычисления.

2 Вариант.
Это поле напрямую изменяется пользователем. И далее те же расчеты.

При этом получилось 2 функции, которые выполняют одну и туже работу, но запускаются при изменении 2-х разных полей.

Есть ли вариант как-то написать условие, что запуск функции происходит при изменении любого из перечисленных полей?

<div id="calc">
	<div class="description">
		<h4>Описание товара</h4>
		...<br>
		Кол-во м2 в уп.: <span id="count">1.9218</span> м2
	</div>
	<div class="price">
		<span>Цена:</span>
		<span class="old-price">1590</span>
		<span>руб.</span>
		<span class="new-price">1462</span>
		<span>руб.</span>
	</div>
	<div>
		<label for="u-m">Введите требуюмую площадь: </label>
		<input type="number" step="any" name="user_amount" id="u-m">
		<span>( <span class="calc-amount">?</span> м) = <span class="calc-price">?</span> руб.</span>
		<br><br>
		<label for="b-m">Количество упаковок: </label>
		<input type="number" step="1" name="bag_amount" id="b-m">
	</div>
</div>


$(document).ready(function() {
	$("#u-m").change(function() {
		var um = $("#u-m").val();			// Вводимая пользователем площадь
		var count = $("#count").html();		// Сколько м.кв. в 1 упаковке
		var amount = Math.ceil(um / count);	// Высчитываем сколько нужно упаковок, чтобы покрыть площадь
		$("#b-m").val(amount);				// Передаем полученное количество в поле, дальше все расчеты ведем от этого поля
		$(".calc-amount").text(amount * count);	// Передаем в .calc-amount реальную площадь этого количества упаковок
		var price = $(".new-price").html();		// Получаем цену за м.кв.
		$(".calc-price").text((amount * count * price).toFixed(2));	// Считаем и передаем стоимость полученных м.кв. в поле
	});
	$("#b-m").change(function() {
		var amount = $("#b-m").val();		// Берем значения из поля (это делается на случай, если пользователь сам туда вписал число)
		var count = $("#count").html();			// Сколько м.кв. в 1 упаковке
		$(".calc-amount").text(count * amount);	// Передаем в .calc-amount покрытие заданным количеством упаковок
		var price = $(".new-price").html();		// Получаем цену за м.кв.
		$(".calc-price").text((amount * count * price).toFixed(2));	// Считаем и передаем стоимость полученных м.кв. в поле
	});
});

Последний раз редактировалось the_little, 31.10.2017 в 10:19.
Ответить с цитированием
  #2 (permalink)  
Старый 31.10.2017, 10:34
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от the_little
Есть ли вариант как-то написать условие, что запуск функции происходит при изменении любого из перечисленных полей?
Как вариант, использовать единую функцию на все события. Т.к. внутри нее можно узнать на каком элементе это произошло и какое событие собственно случилось.
Имея такую информацию можно сделать любые выводы и действия.

А можно просто написать третью функцию и в нее поместить общую часть из первых двух...

Выбор за тобой.
Ответить с цитированием
  #3 (permalink)  
Старый 31.10.2017, 10:34
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,706

the_little, в первом варианте обратитесь к полю, которое пользователь может сам изменить и вызовите на нем событие "change".
http://api.jquery.com/trigger/

Не катит, обработчики разные.
Ответить с цитированием
  #4 (permalink)  
Старый 31.10.2017, 11:16
Профессор
Отправить личное сообщение для the_little Посмотреть профиль Найти все сообщения от the_little
 
Регистрация: 25.09.2017
Сообщений: 186

Сообщение от ksa Посмотреть сообщение
Как вариант, использовать единую функцию на все события.
А как это сделать?

Код то у меня работает нормально. Напрягает что по сути 2 функции одинаковые, просто вызываются разными действиями...
Ответить с цитированием
  #5 (permalink)  
Старый 31.10.2017, 11:27
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,706

the_little, попробуйте так:
$(document).ready(function() {
	$("#b-m,#u-m").change(function(){
		var $t=$(this),
			bool=$t.attr('id')=='u-m',
			um=$("#u-m").val(),
			count=$("#count").html(),
			amount=bool?
				Math.ceil(um / count):
				$("#b-m").val(),
			price=$(".new-price").html();
			
		if(bool)
			$("#b-m").val(amount);
		
		$(".calc-amount").text(amount * count);
		$(".calc-price").text((amount * count * price).toFixed(2));
	});
});
Ответить с цитированием
  #6 (permalink)  
Старый 31.10.2017, 11:35
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от the_little
А как это сделать?
Можно как у Nexus...

А можно так
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='https://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
$(function(){
	var test=function(e){
		alert(e.target.id);
	};
	$('#t0, #t1').change(test);
});
</script>
</head>
<body>
<input type='text' id='t0' />
<input type='text' id='t1' />
</body>
</html>
Ответить с цитированием
  #7 (permalink)  
Старый 31.10.2017, 11:39
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,706

ksa, а чем Ваш метод от моего отличается?
Не догоню.
Ответить с цитированием
  #8 (permalink)  
Старый 31.10.2017, 11:41
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от Nexus
а чем Ваш метод от моего отличается?
У меня именная функция, у тебя безымянная...
Ответить с цитированием
  #9 (permalink)  
Старый 31.10.2017, 11:49
Профессор
Отправить личное сообщение для the_little Посмотреть профиль Найти все сообщения от the_little
 
Регистрация: 25.09.2017
Сообщений: 186

Спасибо!!! Работает как надо. Только хотелось бы еще в коде разобраться...
$(document).ready(function() {
	$("#b-m,#u-m").change(function(){		
		var $t=$(this),						// Переменная t, которая определяет в каком поле происходит действие???
			bool=$t.attr('id')=='u-m',		// Вот это не пойму. attr('id') возвращает первый id, который ему попадется???
			um=$("#u-m").val(),
			count=$("#count").html(),
			amount=bool?					// Что это делает?
				Math.ceil(um / count):      // не понимаю что дальше написано... Передаем Math.ceil(um / count) в #b-m.
				$("#b-m").val(),
			price=$(".new-price").html();
			
		if(bool)							// Что это делает?
			$("#b-m").val(amount);
		
		$(".calc-amount").text(amount * count);
		$(".calc-price").text((amount * count * price).toFixed(2));
	});
});
Ответить с цитированием
  #10 (permalink)  
Старый 31.10.2017, 11:51
Профессор
Отправить личное сообщение для the_little Посмотреть профиль Найти все сообщения от the_little
 
Регистрация: 25.09.2017
Сообщений: 186

блин, надо учить букварь...
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
запуск и остановка скрипта при изменении правила display onuvidelsolnce Элементы интерфейса 9 03.02.2014 16:44
jQuery выполнение функции при условии. gameviktor Angular.js 1 28.01.2014 18:13
К одной функции привязать события и элементы kamushek jQuery 2 08.07.2011 22:12
Можно ли передать переменую grid из одной функции в другую alexrzl ExtJS 1 16.11.2010 18:33
Паралельное выполнение одной и той-же функции Сеня AJAX и COMET 3 24.01.2009 20:59