Запуск одной функции при нескольких .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,
http://api.jquery.com/trigger/ Не катит, обработчики разные. |
Цитата:
Код то у меня работает нормально. Напрягает что по сути 2 функции одинаковые, просто вызываются разными действиями... |
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));
});
});
|
Цитата:
А можно так
<!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>
|
ksa, а чем Ваш метод от моего отличается? :)
Не догоню. |
Цитата:
|
Спасибо!!! Работает как надо. Только хотелось бы еще в коде разобраться...
$(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));
});
});
|
блин, надо учить букварь...
|
| Часовой пояс GMT +3, время: 13:07. |