Пытаюсь написать блок с ценами, в котором цена за единицу товара изменяется в зависимости от его количества. Вот как-то так:
Количество — Цена за единицу 1______________________110 ₽ 10_____________________105 ₽ 20_____________________100 ₽ ... Количество товаров:__ Итого: Цена за единицу:
Есть необходимость написать поле ввода, в которое пользователь вводит количество товаров, и всё это на лету пересчитывается и суммируется.
Вот моя реализация:
var price1 = 110,
price2 = 105,
price3 = 100,
qty1 = 1,
qty2 = 10,
qty3 = 20;
function conversion(val) {
var div = document.getElementById("div"),
price = document.getElementById("price");
if (isNaN(val)) {
div.innerHTML = "";
price.innerHTML = "";
} else {
switch (true) {
case (val <= 0):
{
div.innerHTML = "";
price.innerHTML = "";
break;
}
case (val >= qty1 && val < qty2):
{
div.innerHTML = val * price1;
price.innerHTML = price1;
break;
}
case (val >= qty2 && val < qty3):
{
div.innerHTML = val * price2;
price.innerHTML = price2;
break;
}
case (val >= qty3):
{
div.innerHTML = val * price3;
price.innerHTML = price3;
break;
}
}
}
}
<div>
<div>1 шт. — 110 ₽</div>
<div>10 шт. — 105 ₽</div>
<div>20 шт. — 100 ₽</div>
</div>
<div>
Количество товаров:
<div>
<input id="txt" onblur="conversion(this.value)" onchange="conversion(this.value)" onkeypress="conversion(this.value)" onkeyup="conversion(this.value)" type="number">
</div>
</div>
<div>
Итого:
<div id="div"></div>
</div>
<div>
Цена за шт.:
<div id="price"></div>
</div>
Прошу подсказать, как это можно грамотно реализовать с учётом того, что строчек с количеством и ценой за единицу может быть от одной до бесконечности (значения берутся из базы). На ум приходит записывать цену и количество в data-артибуты и как-нибудь перебирать эти строки скриптом.
...
<div data-quantity="1" data-price="115" id="shop">
<span class="quantity">1</span>
<span class="price">115</span>
</div>
...
Спасибо!