С помощью <input type=range> задаем количество товара. Цена единицы товара, перечисленная в массиве tariff[75,70,66,62,58,55] колеблется в зависимости от количества, чем больше товара, тем дешевле, по конкретным диапазонам:
Не получается сделать, что бы выбранно кол-во перемножалось на соответствующую цену, пробовал через switch...case, но все перемножается на первую цену из массива, что по идее логично.
Как сделать, что бы при выборе количества слайдером цена за единицу всегда подбиралась в соответствии с диапазоном?
Пример https://jsfiddle.net/wp8ow8vz/
function rangeCalc(i) {
var tariff = [[2, 75],[5, 70],[10, 66],[20, 62],[50, 58],[100, 55]];
$.each(tariff, function() {
if (this[0] <= i)
{
var price = this[1];
$('.calc-price').text(i*price);
}
})
};
$('.calc-range').on('input', function(){
$('.calc-count').text(this.value);
rangeCalc(this.value);
});
$(document).ready(function($) {
rangeCalc($('.calc-range').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Сколько нужно кружек?</h2>
<input class="calc-range m-top-20" type="range" min="1" max="100" step="1" value="1">
Количество:<div class="calc-count">1</div>
Стоимость<span class="calc-price">100</span> руб
Сборка персонального компьютера от Artline: умный выбор для современных пользователей