На этом шаге мы рассмотрим организацию пересчета общего количества.
Теперь перейдем к реализации манипуляций фактическими числами, которые пользователь вводит в форму корзины с покупками. На нашей форме присутствует кнопка Пересчитать, которая могла бы вызывать передачу формы на сервер, где вычисляются новые суммарные значения, и возврат формы пользователю. Однако для этого необходимо выполнить обновление страницы, которое не является обязательным; все эти действия могут быть выполнены на стороне браузера с помощью jQuery.
Самое простое вычисление в этой форме выполняется для ячейки в строке Доставка, где отображается общее количество заказанных товаров. Когда пользователь изменяет количество в одной из строк, нам необходимо сложить все введенные значения, чтобы получить новую сумму, и отобразить эту сумму в ячейке:
var $quantities = $('td.quantity input');
$quantities.change(function() {
var totalQuantity = 0;
$quantities.each(function() {
var quantity = parseInt(this.value);
totalQuantity += quantity;
});
$('tr.shipping td.quantity').text(String(totalQuantity));
});
Для выполнения вычислений мы можем на выбор использовать несколько событий. Мы могли бы использовать событие keypress и производить пересчет при каждом нажатии клавиши. Мы могли бы также использовать событие blur, которое возбуждается всякий раз, когда поле теряет фокус ввода. Мы можем проявить более консервативное отношение к использованию вычислительных ресурсов и производить пересчет только по событию change. При таком способе мы будем производить пересчет, только если пользователь оставит поле со значением, отличающимся от предыдущего.
Общее количество приобретаемых предметов вычисляется с помощью простого цикла .each(). Свойство .value поля содержит строковое представление значения поля, поэтому для преобразования его в целое число мы используем встроенную функцию parseInt(). Этот прием позволяет избежать ситуации, когда оператор сложения интерпретируется как оператор конкатенации строк, поскольку обе эти операции обозначаются одним и тем же символом. Для отображения результатов вычислений мы должны передать методу .text() библиотеки jQuery строковое значение, поэтому мы используем функцию String(), которая создает новую строку, используя вычисленное нами суммарное количество.
Теперь изменение количества приобретаемых предметов автоматически будет приводить к пересчету общего количества, как показано на рисунке 1.
Рис.1. Изменение количества предметов вызывает пересчет общего количества
Полный текст этого примера можно взять здесь.На следующем шаге мы рассмотрим интерпретирование и форматирование денежных значений.
