Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 01.02.2017, 02:43   #1
tina22222
Пользователь
 
Регистрация: 28.01.2014
Сообщений: 34
Счастье проблема: обнуляет счетчик

Привет всем. Буду очень рада Вашему совету!
Я разрабатываю сайт, но знаний в JS не особо много( перелопатила уже кучу информации, но ошибку найти не могу(
на сайте http://babywatch-shop24.ru/ есть калькулятор "Собери букет",
цены я все проставила. Они все по отдельности работают.
Переменным значениям задала и он их отображает, если выбирать по отдельности, а вместе, обнуляет значение и считает кол-во по последнему.



Это код самого блока HTML

Код:
<script type="text/javascript">
    	window.App = {
			price: {
					'50': 90,
				'11': 100,
				'22': 110,
				'33': 110,
				'44': 110,
				'55': 300,
				'66': 300			},
			
    </script>
</head>
<body>

	<!-- create buket start -->
			<section class="create_buket" >
				<div class="container" >
					<div class="row" >
						<div class="col-xs-12 col-md-7" >
							<h2>Собери букет!</h2>
							<form id="create_buket" d_id="form_1" action="/formfull.php" method="POST" onsubmit="this.submit();" >
								<div class="top" item_did="item_1_0" >

									<div class="chose_item" item_did="item_1_1" >
										<label class="checkbox" >
											<input type="checkbox"  name="size"  value="50"    item_did="item_1_2">
											<span item_did="item_1_3">Роза </span>
										</label>
										<div class="count_wrap" item_did="item_1_4" >
											<input type="text"  value="0"  name="size_white" item_did="item_1_5" >
											<div class="buttons" item_did="item_1_6" >
												<span class="plus" item_did="item_1_7" ></span>
												<span class="minus" item_did="item_1_8" ></span>
											</div>
										</div>
									</div>

									<div class="chose_item" item_did="item_1_9" >
										<label class="checkbox" >
											<input type="checkbox"  name="size"  value="11"   item_did="item_1_10">
											<span item_did="item_1_11">Хризантема кустовая</span>
										</label>
										<div class="count_wrap" item_did="item_1_12" >
											<input type="text"  value="0"  name="size_crimson" item_did="item_1_13" >
											<div class="buttons" item_did="item_1_14" >
												<span class="plus" item_did="item_1_15" ></span>
												<span class="minus" item_did="item_1_16" ></span>
											</div>
										</div>
									</div>
									
									
									
								
									<div class="chose_item" item_did="item_1_17" >
										<label class="checkbox" >
											<input type="checkbox"  name="size"  value="22"    item_did="item_1_18">
											<span item_did="item_1_19">Гербера </span>
										</label>
										<div class="count_wrap" item_did="item_1_20" >
											<input type="text"  value="0"  name="size_white" item_did="item_1_21" >
											<div class="buttons" item_did="item_1_22" >
												<span class="plus" item_did="item_1_23" ></span>
												<span class="minus" item_did="item_1_24" ></span>
											</div>
										</div>
									</div>

									<div class="chose_item" item_did="item_1_25" >
										<label class="checkbox" >
											<input type="checkbox"  name="size"  value="22"   item_did="item_1_26">
											<span item_did="item_1_27">Альстромерия</span>
										</label>
										<div class="count_wrap" item_did="item_1_28" >
											<input type="text"  value="0"  name="size_crimson" item_did="item_1_29" >
											<div class="buttons" item_did="item_1_30" >
												<span class="plus" item_did="item_1_31" ></span>
												<span class="minus" item_did="item_1_32" ></span>
											</div>
										</div>
									</div>	
									
									
									
									
									

									<div class="chose_item" item_did="item_1_33" >
										<label class="checkbox" >
											<input type="checkbox"  name="size"  value="55"   item_did="item_1_34">
											<span item_did="item_1_35">Лилия</span>
										</label>
										<div class="count_wrap" item_did="item_1_36" >
											<input type="text"   value="0"  name="size_red" item_did="item_1_37" >
											<div class="buttons" item_did="item_1_38" >
												<span class="plus" item_did="item_1_39" ></span>
												<span class="minus" item_did="item_1_40" ></span>
											</div>
										</div>
									</div>

									<div class="chose_item" item_did="item_1_41" >
										<label class="checkbox" >
											<input type="checkbox"  name="size"  value="55"   item_did="item_1_42">
											<span item_did="item_1_43">Оформление</span>
										</label>
										<div class="count_wrap" item_did="item_1_44" >
											<input type="text"   value="0"   name="size_lilac" item_did="item_1_45" >
											<div class="buttons" item_did="item_1_46" >
												<span class="plus" item_did="item_1_47" ></span>
												<span class="minus" item_did="item_1_48" ></span>
											</div>
										</div>
									</div>
</div>
								<div class="bottom" item_did="item_1_49" >
									<label class="radiobox" >
										<input type="radio"  name="size"  value="22"  checked item_did=item_1_50>
										<span item_did="item_1_51">Работа флариста - бесплатно!</span>
									</label>
								
								
								
								</div>
							</form>

Последний раз редактировалось tina22222; 01.02.2017 в 02:46.
tina22222 вне форума Ответить с цитированием
Старый 01.02.2017, 02:44   #2
tina22222
Пользователь
 
Регистрация: 28.01.2014
Сообщений: 34
По умолчанию код JS

код JS
Код:
    	
	// глобальный обьект с ценами 
	countPrice();

	$('#create_buket input').on({
		change: function() {
			var parent = $(this).parent(),
			forward;

			if($(parent).hasClass('checkbox')) {
				forward = 'checkbox';
			} else if ($(parent).hasClass('radiobox')) {
				forward = 'radiobox';
			}

			switch(forward) {
				case 'checkbox':
					countPrice();
					replaceImg();
					break;
				case 'radiobox':
					countPrice();
					break;
			}
		},
		keypress: function (e) {
			e = e || event;

			if (e.ctrlKey || e.altKey || e.metaKey) return;

			var chr = getChar(e);

			if (chr == null) return;

			if (chr < '0' || chr > '9') {
			  return false;
			}
			var siblingInput = $(this).parent().siblings('label').find('input')
			$(siblingInput).prop('checked', true);
		},
		blur: function() {
			countPrice();
		}
	});

	$('#create_buket .buttons span').click(function(e) {
		var siblingInput = $(this).parent().parent().siblings('label').find('input'),
			target = e.target,
			oldVal = +$(this).parent().siblings('input').val();

		if($(target).hasClass('plus')) {
			oldVal++;
			$(this).parent().siblings('input').val(oldVal);
			$(siblingInput).prop('checked', true);
			countPrice();
			replaceImg();
		} else if ( oldVal>0 ) {
			oldVal--;
			$(this).parent().siblings('input').val(oldVal);
			if(oldVal === 0) {
				$(siblingInput).prop('checked', false);
			} 
			countPrice();
			replaceImg();
		}
	});

	$('.ready_bukets input').each(function() {
		$(this).change(function() {
			var val = +$(this).val(),
				id = $(this).attr('name'),
				num = id.slice(-1),
				newPrice = val*App.quantity[num];

			$('.ready_bukets #' + id).animateNumber({ number: newPrice }, 1000);
		});
	});

	function countPrice() {
		var size = $('#create_buket input[name="size"]:checked').val(),
			arrSumm = [],
			summ = 0;

		$('#create_buket input[type="checkbox"]:checked').each(function() {
			var count = +$(this).parent().siblings('.count_wrap').find('input').val();
			arrSumm.push( count * App.price[size]);
		});

		for(i=0; i<arrSumm.length; i++) {
			summ += arrSumm[i];
		}
		if(arrSumm.length>0) {
			$('.create_buket .price_container p span').animateNumber({ number: summ }, 1000);
		} else {
			$('.create_buket .price_container p span').animateNumber({ number: 0 }, 1000);
		}
	}

	function replaceImg() {
		var arr = [],
			name;

		$('#create_buket input[type="checkbox"]:checked').each(function() {
			var color = $(this).val();
			arr.push(color);
		});

	
		

	}

	function find(array, value) {

	  for (var i = 0; i < array.length; i++) {
	    if (array[i] == value) return i;
	  }

	  return -1;
	}

	// event.type должен быть keypress
	function getChar(event) {
	  if (event.which == null) { // IE
	    if (event.keyCode < 32) return null; // спец. символ
	    return String.fromCharCode(event.keyCode)
	  }

	  if (event.which != 0 && event.charCode != 0) { // все кроме IE
	    if (event.which < 32) return null; // спец. символ
	    return String.fromCharCode(event.which); // остальные
	  }

	  return null; // спец. символ
	}


// POPULATING FORM HIDDEN VALUES FOR EMAIL NOTIFICATION
	$(function() {
	    $('#form_circle').submit(function() {
			var size = $('#create_buket input[name="size"]:checked').val(),
				price = document.getElementById('cbprice').innerHTML,
				ppu = App.price[size],
				quantity = price / ppu;

			//$('#create_buket input[type="checkbox"]:checked').each(function() {
			//	var count = +$(this).parent().siblings('.count_wrap').find('input').val();
			//});


			document.getElementById('cbsizeinput').value = size;
			document.getElementById('cbquantityinput').value = quantity;
			document.getElementById('cbppuinput').value = ppu;
			document.getElementById('cbpriceinput').value = price;

	        return true; // return false to cancel form action
	    });

	    $('#maisonbutton').click(function() {
			var name = 'Голландские розы в круглом MAISON',
				price = document.getElementById('maisonprice').innerHTML;

			document.getElementById('puproductinput').value = name;
			document.getElementById('pupriceinput').value = price;

	        return true; // return false to cancel form action
	    });

	    $('#item15button').click(function() {
			var name = 'Голландские розы в квадратном MAISON',
				price = document.getElementById('item15price').innerHTML;

			document.getElementById('puproductinput').value = name;
			document.getElementById('pupriceinput').value = price;

	        return true; // return false to cancel form action
	    });
Вложения
Тип файла: rar Новая папка (3).rar (18.0 Кб, 10 просмотров)

Последний раз редактировалось tina22222; 01.02.2017 в 03:24.
tina22222 вне форума Ответить с цитированием
Старый 01.02.2017, 09:10   #3
ADSoft
Старожил
 
Регистрация: 25.02.2007
Сообщений: 4,150
По умолчанию

ну дык вам в раздел для js
ADSoft вне форума Ответить с цитированием
Старый 01.02.2017, 09:33   #4
Serge_Bliznykov
Старожил
 
Регистрация: 09.01.2008
Сообщений: 26,238
По умолчанию

Цитата:
Сообщение от ADSoft Посмотреть сообщение
ну дык вам в раздел для js
согласен. перенёс тему.
Serge_Bliznykov вне форума Ответить с цитированием
Старый 01.02.2017, 11:18   #5
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

http://aishek.github.io/jquery-animateNumber/
пример 5: как задать стартовое число для анимации числа
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 01.02.2017, 11:40   #6
pompiduskus
юзер как все
Участник клуба
 
Аватар для pompiduskus
 
Регистрация: 10.01.2012
Сообщений: 1,586
По умолчанию

А в каком редакторе пишете код ?
<Дзен - Вся вселенная в тебе > | Резюме: https://ch3ll0v3k.github.io/CV/
pompiduskus вне форума Ответить с цитированием
Старый 01.02.2017, 15:03   #7
tina22222
Пользователь
 
Регистрация: 28.01.2014
Сообщений: 34
По умолчанию

в Notepad++
tina22222 вне форума Ответить с цитированием
Старый 01.02.2017, 15:06   #8
tina22222
Пользователь
 
Регистрация: 28.01.2014
Сообщений: 34
По умолчанию

не поняла немного) а зачем мне стартовое число для анимации. У меня это есть. У меня он считает не правильно, не могу понять где обнуляет счетчик
tina22222 вне форума Ответить с цитированием
Старый 01.02.2017, 15:32   #9
Serge_Bliznykov
Старожил
 
Регистрация: 09.01.2008
Сообщений: 26,238
По умолчанию

[offtop]
исправьте ошибку
Цитата:
Код:
Работа флариста - бесплатно!
правильно - "флорист" (от слова "Флора")


а косяк у Вас явно в функции countPrice()
Код:
	function countPrice() {
		var size = $('#create_buket input[name="size"]:checked').val(),
			arrSumm = [],
			summ = 0;

		$('#create_buket input[type="checkbox"]:checked').each(function() {
			var count = +$(this).parent().siblings('.count_wrap').find('input').val();
			arrSumm.push( count * App.price[size]);
		});

		for(i=0; i<arrSumm.length; i++) {
			summ += arrSumm[i];
		}
		if(arrSumm.length>0) {
			$('.create_buket .price_container p span').animateNumber({ number: summ }, 1000);
		} else {
			$('.create_buket .price_container p span').animateNumber({ number: summ  }, 1000);
		}
	}
вот только у меня с налёту не получается разобрать логику работы данной функции....

Последний раз редактировалось Serge_Bliznykov; 01.02.2017 в 15:44.
Serge_Bliznykov вне форума Ответить с цитированием
Старый 01.02.2017, 16:14   #10
Serge_Bliznykov
Старожил
 
Регистрация: 09.01.2008
Сообщений: 26,238
По умолчанию

логика, конечно, очень странная. из html кода получаем значение value, по которому уже потом берём цену из массива. Почему бы цену сразу в value не положить, не понятно.
но не важно.
чтобы ваш код заработал, замените код вашей функцию на такой код:

Код:
	function countPrice() {
		var arrSumm = [];
		$('#create_buket input[type="checkbox"]:checked').each(function() {
                        var $item=$(this);
			var floraIndex=$(this).val();
			var count = +$item.parent().siblings('.count_wrap').find('input').val();
			arrSumm.push( count * App.price[floraIndex]);
		});

		var summ = 0;
		for(i=0; i<arrSumm.length; i++) {
			summ += arrSumm[i];
		}
		$('.create_buket .price_container p span').animateNumber({ number: summ }, 1000);
	}
p.s. и внимательно проверьте, что value корректно расставлены и соответствуют ценам.

например,
Цитата:
Код:
		<label class="checkbox" >
				<input type="checkbox"  name="size"  value="22"    item_did="item_1_18">
				<span item_did="item_1_19">Гербера </span>
		</label>
....

		<label class="checkbox" >
				<input type="checkbox"  name="size"  value="22"   item_did="item_1_26">
				<span item_did="item_1_27">Альстромерия</span>
		</label>
почему у Герберы и у Альстромерии value одно и то же? Это один и тот же цветок?
или это разные цветы, но ВСЕГДА продаются по одной и той же цене?!

или почему одно и тоже значение value
Цитата:
Код:
			<label class="checkbox" >
				<input type="checkbox"  name="size"  value="55"   item_did="item_1_34">
				<span item_did="item_1_35">Лилия</span>
			</label>
			<div class="count_wrap" item_did="item_1_36" >
				<input type="text"   value="0"  name="size_red" item_did="item_1_37" >
				<div class="buttons" item_did="item_1_38" >
					<span class="plus" item_did="item_1_39" ></span>
					<span class="minus" item_did="item_1_40" ></span>
				</div>
			</div>
		</div>

		<div class="chose_item" item_did="item_1_41" >
			<label class="checkbox" >
				<input type="checkbox"  name="size"  value="55"   item_did="item_1_42">
				<span item_did="item_1_43">Оформление</span>
			</label>
цена цветка лилии и цена оформления всегда одна и та же?!
Serge_Bliznykov вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Счетчик не правильно считает!может проблема в шаблоне? feesta Помощь студентам 1 05.02.2012 16:45
Метод Шейкера, обнуляет максимальный элемент, почему? leshij Паскаль, Turbo Pascal, PascalABC.NET 10 14.03.2011 20:05
Счетчик Alex_sim Помощь студентам 2 13.06.2010 04:30
Мозилка обнуляет все настройки после каждого включения Alex Cones Софт 5 18.08.2009 09:36