Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.01.2018, 19:04
Интересующийся
Отправить личное сообщение для Denis_Landar Посмотреть профиль Найти все сообщения от Denis_Landar
 
Регистрация: 10.10.2017
Сообщений: 24

Изменение числа(в span) при вводе большего количества товара
Добрый день!
Возникла проблема, в которой мне нужная помощь моих друзей с форума
Есть страничка, на которой есть мини-магазинчик, но теперь есть новое условие!
Когда посетитель будет вводить количества товара, то как сделать так, что бы при вводе большего количества(например больше 12) цена товара менялась и перекрашивалась в другой цвет?
Страница мини-магазинчика: https://polynor.com.ua/order
Калькулятор:
$(function() {
    var table = $(".order-table"),
    div = table.find(".number"),
    input = div.find("input").get(),
    total = $(".order-end-form>input:text");
 
    function sum() {
        var n = input.reduce(function(s, el) {
            var val = +el.value || 0,
            price = +el.dataset.price || 0;
            val < 0 && (val = 0);
            return s + val * price
        }, 0);
        total.val(n)
    }
    div.each(function(indx, el) {
        var price = parseInt($(el).prev().text()),
        input = $("input", el).on({
            input: sum
        })[0];
        input.dataset.price = price;
        $(el).on("click", ".minus,.plus", function(event) {
            val = +input.value || 0;
            $(event.target).is(".minus") ?
            val-- : val++;
            val < 0 && (val = 0);
            input.value = val;
            sum()
        })
    })
});

Форма товара:
<tr>
										<td><b>НПУ POLYNOR</b>
											<br>Однокомпонентный напыляемый полиуретановый утеплитель для тепло и
											<br>шумоизоляции объектов. Аэрозольный баллон 890 мл
											<p><b>Система скидок</b></p>
											<table class="table_in_tableorder">
												<tr>
													<td>от 1 шт</td>
													<td>≥ 12 шт</td>
													<td>≥ 48 шт</td>
													<td>≥ 120 шт</td>
												</tr>
												<tr>
													<td>280 грн</td>
													<td>270 грн</td>
													<td>260 грн</td>
													<td>250 грн</td>
												</tr>
											</table>
										</td>
										<td><img src="img/order/ballon.png" alt="НПУ POLYNOR"></td>
										<td><span>280,00</span>
											<div class="number">
												<span style="user-select: none;padding:3px 9px 3px 9px;" class="minus">-</span>
												<input style="user-select: none;background-color: #fff;" name="НПУ POLYNOR" type="text" value="0" size="5" />
												<span style="user-select: none;" class="plus">+</span>
											</div>
										</td>
									</tr>
Ответить с цитированием
  #2 (permalink)  
Старый 18.01.2018, 01:06
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 1,392

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<span id="cena">280</span><span> руб.</span><br>
	<input type="text" id="inp" value='0'>
	<script>
		inp.oninput=function(){
			var a = [[120,250,'#0F0'],[48,260,'#590'],[12,270,'#950'],[1,280,'#F00']].find(el => el[0] <= inp.value),
			cena = document.querySelector("#cena");
			cena.textContent = a[1];
			cena.style.color = a[2];
		};
	</script>
</body>
</html>


Вот простой пример
Ответить с цитированием
  #3 (permalink)  
Старый 18.01.2018, 01:09
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 1,392

массив A [[кол-во, цена, цвет],[кол-во, цена, цвет]...]
Ответить с цитированием
  #4 (permalink)  
Старый 18.01.2018, 02:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 22,471

j0hnik,
var a = [[120,250,'#0F0'],[48,260,'#590'],[12,270,'#950'],[1,280,'#F00']].find(el => el[0] <= (+inp.value||1)),
Ответить с цитированием
  #5 (permalink)  
Старый 18.01.2018, 05:26
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 1,392

рони,
Согласен, так должно быть.
Ответить с цитированием
  #6 (permalink)  
Старый 18.01.2018, 19:22
Интересующийся
Отправить личное сообщение для Denis_Landar Посмотреть профиль Найти все сообщения от Denis_Landar
 
Регистрация: 10.10.2017
Сообщений: 24

рони,
j0hnik,
Спасибо, вы очень помогли!
Ответить с цитированием
  #7 (permalink)  
Старый 21.01.2018, 01:50
Интересующийся
Отправить личное сообщение для Denis_Landar Посмотреть профиль Найти все сообщения от Denis_Landar
 
Регистрация: 10.10.2017
Сообщений: 24

j0hnik,
Добрый вечер!
Не могли бы вы ещё раз посмотреть, я залил на сервер, но скрипт ведёт себя странно! Первый товар за 280
Вот сайт:https://polynor.com.ua/order
Ответить с цитированием
  #8 (permalink)  
Старый 21.01.2018, 03:52
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 1,392

поставьте в конец страницы перед закрывающим тегом</body>

function cena(){
			var a = [[120,250,'#0F0'],[48,260,'#590'],[12,270,'#950'],[1,280,'#F00']].find(el => el[0] <= (+inp.value||1)),
			cena = document.querySelector("#cena");
			cena.textContent = a[1];
			cena.style.color = a[2];
		};

		document.querySelector('#inp').addEventListener("input",  cena, false);
		document.body.addEventListener("click",  cena, false); 
		window.addEventListener("DOMContentLoaded",  cena, false);
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
изменение значения input при смене значения select galart jQuery 4 30.01.2015 19:39
Изменение изображения при наведении mishko_o Элементы интерфейса 4 24.10.2011 16:20
Изменение стиля родительского элемента при :hover дочернего lanzs Элементы интерфейса 2 16.10.2010 13:28
Изменение мигающего курсора при вводе текста m-mikle Элементы интерфейса 5 27.03.2010 13:51
Реализация скрипта. Изменение дерева при вводе каждой следующей буквы слова. WDha AJAX и COMET 0 04.11.2009 00:19