Javascript.RU

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

Изменение числа(в 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, 00:06
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 2,338

<!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, 00:09
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 2,338

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

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, 04:26
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 2,338

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

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

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

поставьте в конец страницы перед закрывающим тегом</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);
Ответить с цитированием
  #9 (permalink)  
Старый 10.03.2018, 12:50
Интересующийся
Отправить личное сообщение для Denis_Landar Посмотреть профиль Найти все сообщения от Denis_Landar
 
Регистрация: 10.10.2017
Сообщений: 26

j0hnik,
Здравствуйте!
Вы помогли мне с написанием этого скрипта, всё работает отлично, цена меняется с учётом количества, но при добавлении товара не меняется сумма в итоговом input, в span цена 270, а в input приходит начальная 280.
Если можете помочь, то подскажите, что не так, пожалуйста!
Вот эта страница: https://advanced.cn.ua/order

Пример ячейки с товаром:
<tr>
	<td><img src="img/order/ballon.png" alt="НПУ POLYNOR"></td>
	<td><span id="cena">280</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;" id="inp"POLYNOR" type="text" value="0" size="5" />
		<span style="user-select: none;" class="plus">+</span>
	</div>
	</td>
</tr>


Итоговая сумма(куда приходит цена):
<div class="order-end-form">
 <p><b>Сумма заказа</b></p>
 <input readonly name="Сумма" style="background-color: #fff;" type="text">
 <input onClick="ga('send', 'event', 'order', 'click');" class="btn-sale" type="submit" value="Заказать">
</div>


"Калькулятор":
$(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()
		})
	})
});


Замена цены:
<script>
	 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);
			</script>
Ответить с цитированием
Ответ



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

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


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