Калькулятор "Сколько будет стоить свадьба"

Продолжим рассматривать возможность применения библиотеки jQuery на примере создания приложения «Сколько будет стоить свадьба» в виде калькулятора, написанного на JavaScript. Он используется для расчета услуг по проведению свадьбы. Полный код страницы калькулятора «Сколько будет стоить свадьба» будет выглядеть следующим образом:

<table id="tableSelect" style="width: 100%;" border="0" cellspacing="0" cellpadding="0">
 <tbody><tr>
 <td>Ведущий</td>
 <td class="vertical">Часы</td>
 <td>
 <select id="pos_1" name="veduschiy">
 <option value="0">-</option>
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="3">3</option>
 <option value="4">4</option>
 <option value="5">5</option>
 <option value="6">6</option>
 <option value="7">7</option>
 <option value="8">8</option>
 <option value="9">9</option>
 <option value="10">10</option>
 </select>
 </td>
 <td id="pos_1_price" class="vertical">3000</td>
 <td id="pos_1_count">0</td>
 </tr>
 <tr>
 <td>Банкетный зал</td>
 <td class="vertical">Человек</td>
 <td>
 <input id="pos_2" name="people" type="text">
 </td>
 <td id="pos_2_price" class="vertical">2000</td>
 <td id="pos_2_count">0</td>
 </tr>
 <tr>
 <td>Теплоход</td>
 <td class="vertical">Человек</td>
 <td>
 <input id="pos_3" name="people_t" type="text">
 </td>
 <td id="pos_3_price" class="vertical">3000</td>
 <td id="pos_3_count">0</td>
 </tr>
 <tr>
 <td>Видеосъемка</td>
 <td class="vertical">Часов</td>
 <td>
 <select id="pos_4" name="video">
 <option value="0">-</option>
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="3">3</option>
 <option value="4">4</option>
 <option value="5">5</option>
 <option value="6">6</option>
 <option value="7">7</option>
 <option value="8">8</option>
 <option value="9">9</option>
 <option value="10">10</option>
 </select>
 </td>
 <td id="pos_4_price" class="vertical">2500</td>
 <td id="pos_4_count">0</td>
 </tr>
 <tr>
 <td>Украшение шарами</td>
 <td class="vertical">-</td>
 <td>
 <select id="pos_6" name="bubbles">
 <option value="0">Нет</option>
 <option value="1">Да</option>
 </select>
 </td>
 <td id="pos_6_price" class="vertical">5000</td>
 <td id="pos_6_count">0</td>
 </tr>
</tbody></table>

Изучая представленный код, мы видим много ранее рассмотренных элементов, в частности сценарии, таблицы и формы. Как видно по структуре страницы, сначала инициализируется сама библиотека jQuery, затем с помощью символа $ в сценарии вызываются функции из подключенной библиотеки и потом в теле веб-страницы описывается сама форма.

Если подробнее рассматривать элементы формы, то видно, что каждый элемент вне зависимости от своего типа имеет идентификатор, который представлен в виде роэ_номер и предназначен для простоты написания кода с использованием библиотеки jQuery. Есть следующие идентификаторы: pos_home_price - стоимость позиции за единицу и pos_home_count - итоговая сумма по позиции.

Если с формой все достаточно понятно, то постараемся подробнее рассмотреть код самого сценария, использующего библиотеку jQuery.

Первая строка после комментария показывает, что все обрабатываемые изменения относятся к таблице tableSelect.
Вторая строка присваивает итоговой сумме нулевое значение: vari totalSum = 0.
Строка, содержащая запись $ ( "input [ idA = 'pos' ] , select [ id*=' pos' ] ") . each, заставляет выполнять соответствующие, действия для каждого select и input, имеющих id, которые начинаются на pos. Внутри функции each мы указываем те действия, которые желаем выполнять. Переменные задаются следующим образом.
idElement = "#"+$ (this). attr ("id") - создание переменной idElement, которая определяет смежные поля с родственными иденти фи каторами.
priceField = parselnt($(idElement+"_price"). text () ) - будет хранить стоимость по позиции из ячейки с родственными идентификаторами. Как помните, parselnt переводит текст, находящийся в данной переменной, в число.
countField = parselnt($(this).val()) - хранит получаемое значение, введенное пользователем, и также переводит его в число.
Строка $(idElement+"_count").text(priceField * countField) ; - выводит сумму по позиции в нужную ячейку таблицы.
Строка totalSum += priceField * countField; - подсчитывает общую сумму, которую строка $ (" #count_price span") . text (totalSum) ; записывает в отведенное ей место.

На примере использования сценария в виде калькулятора «Сколько будет стоить свадьба» видно, каким образом можно применять рассматриваемую библиотеку jQuery. Она позволяет выполнять на веб-странице расчеты с использованием как числовых констант, так и переменных, получаемых сценарием для обработки через соответствующую форму, находящуюся на веб-странице. Кроме того, можно применять раскрывающиеся списки, значения выбранных элементов которых также могут передаваться сценарию для обработки.

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