Динамическое изменение полей счетчика
У меня есть счетчик, подсчитывающий количество и сумму конкретной продукции. В span с классом quantity хранится количество и сумма в виде "13 x 70 руб." input c type="number" должен получать значение quantity, т.е. число 13.
input c type="button" увеличивают/уменьшают значение переменной input c type="number", что должно также отражаться в quantity, а сумма - перезаписываться в `amount в полном виде, т.е. в виде "13*70 = 910 руб".
Сложность возникает в преобразовании строк в значения и в автоматическом отслеживании изменений с обменом информации между селекторами. В коде написал смысл того, что хочу получить.
var quantity = $(".quantity").text();
$(".input-text.qty.text").val(quantity);
var amount = $(".amount").text();
var total = amount * quantity;
$(".quantity").text() = $(".input-text.qty.text").val(quantity);
$(".amount").text() = total;<span class="quantity">13 × <span class="amount">70 руб.</span></span>
<div class="quantity buttons_added">
<input type="number" step="1" min="1" max="27" id="num_count" name="quantity" value="1" title="Кол." class="input-text qty text" size="4">
<input type="button" value="+1" id="button_plus" class="plus">
<input type="button" value="-1" id="button_minus" class="minus">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>Идея в том, что повесить обработчик события change на элемент #num_count (который и .input-text.qty.text) и обработчики события click на элементы #button_plus и #button_minus. В этих обработчиках вызывается функция changeCountValue, которая меняет значения во всех нужных полях. Заодно добавлены проверки на валидность (не меньше минимума и не больше максимума) значения.
$(document).ready(function() {
var $count = $('#num_count');
var $quantity = $(".quantity");
var amount = parseInt($('.amount').text());
var $sum = $('.sum');
var minCount = parseInt($count.attr('min'));
var maxCount = parseInt($count.attr('max'));
$count.val($quantity.text());
$count.on('change', function() {
changeCountValue(0);
});
$('#button_plus').on('click', function() {
changeCountValue(1);
});
$('#button_minus').on('click', function() {
changeCountValue(-1);
});
function changeCountValue(change)
{
var newCount = parseInt($count.val()) + change;
if (newCount < minCount) {
newCount = minCount;
}
else if (newCount > maxCount) {
newCount = maxCount;
}
$count.val(newCount);
$quantity.text(newCount);
$sum.text(newCount * amount);
}
});<span class="quantity">13</span> × <span class="amount">70</span> = <span class="sum">910</span> руб.
<div class="buttons_added">
<input type="number" step="1" min="1" max="27" id="num_count" name="quantity" value="1" title="Кол." class="input-text qty text" size="4" />
<input type="button" value="+1" id="button_plus" class="plus" />
<input type="button" value="-1" id="button_minus" class="minus" />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
-
13:29
Кофе для программистов: как напиток влияет на продуктивность кодеров?
-
22:13
Рекламные вывески: как привлечь внимание и увеличить продажи
-
19:13
-
16:04
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
-
17:27
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
-
22:17
-
18:08
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
-
18:54
-
17:35
- Почему SERVER_ADDR имеет не тот IP 47923 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30568 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23907 visits
- Как через css изменить цвет png изображения? 10401 visits
- Blob video url download 10006 visits
- Php curl запрос через прокси с авторизацией 9278 visits
- Работа с captcha vk api 8147 visits
© "hostciti.net" 28.3.2025 | 21:56