Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Значение input изменилось, а функция берет предыдущее значение (https://javascript.ru/forum/misc/73477-znachenie-input-izmenilos-funkciya-beret-predydushhee-znachenie.html)

the_little 18.04.2018 15:04

Значение input изменилось, а функция берет предыдущее значение
 
Всем привет. Помогите пожалуйста.

Есть такой код.

// Select
$('.slct').click(function(){
	/* Заносим выпадающий список в переменную */
	var dropBlock = $(this).parent().find('.drop');
	/* Делаем проверку: Если выпадающий блок скрыт то делаем его видимым*/
	if( dropBlock.is(':hidden') ) {
		dropBlock.slideDown();
		/* Выделяем ссылку открывающую select */
		$(this).addClass('active');
		/* Работаем с событием клика по элементам выпадающего списка */
		$('.drop').find('li').click(function(){
			/* Заносим в переменную HTML код элемента
			списка по которому кликнули */
			var selectResult = $(this).text();
			/* Находим наш скрытый инпут и передаем в него
			значение из переменной selectResult */
			$(this).parent().parent().find('input').val(selectResult);
			/* Передаем значение переменной selectResult в ссылку которая
			открывает наш выпадающий список и удаляем активность */
			$(this).parent().parent().find('.slct').removeClass('active').html(selectResult);
			/* Скрываем выпадающий блок */
			dropBlock.slideUp();
		});
	/* Продолжаем проверку: Если выпадающий блок не скрыт то скрываем его */
	} else {
		$(this).removeClass('active');
		dropBlock.slideUp();
	}
	/* Предотвращаем обычное поведение ссылки при клике */
	return false;
});

$(document).ready(function() {

	var getData=new Promise(function(resolve){
		Papa.parse("/price.csv", {
			download: true,
			header: false,
			complete: function(results) {
				resolve(results.data);
			}
		});
	});

	getData.then(function(data){

		// СТОИМОСТЬ РАБОТ
		var as 			= data[0][2];			// Студия - 18 000 р\м2
		var a1 			= data[1][2];			// 1 комн. кв - 16 000 р.\м2
		var a2 			= data[2][2];			// 2 комн. кв - 14 000 р.\м2
		var a3 			= data[3][2];			// 3 и более - 13 000 руб.\м2
		var c_price = data[4][2];			// СУ 140000р

		function changeFunc() {
			// Базовые работы (списки)
			var style = $('#base-style').val();
			console.log(style);
		};

		$('#rooms-amount, #apartment-square, #sanuzel-amount, #dop-akcentwall-amount, #dop-arka-amount, #dop-radiator-amount, #dop-karniz-amount, #dop-kafel-amount, #dop-roomlight-amount, #base-style, #base-potolok, #base-color, base-floor').change(function() {
			changeFunc();
		});

		$('.start-calc').click(function() {
			changeFunc();
		});

	});
});


Скрипт, который делает списки.
При выборе элемента списка, соответственно присваивается определенное значение в input.
Когда выбираю элемент списка, функция отрабатывает. В инпут заносится новое значение (в браузере я вижу новое значение в поле), но console.log (57 строка) выдает старое значение, предыдущее. ПРичину не могу найти.

Куда я уже эти списки логи не вставлял. Все равно в поле значение правильное, а в логи выводит старое...

ksa 18.04.2018 15:53

Цитата:

Сообщение от the_little
Куда я уже эти списки логи не вставлял.

Сделай тестовый пример на котором будет проявляться проблема. На нем можно будет показать варианты решения или будет понятно что у тебя не так... ;)

the_little 18.04.2018 16:09

Цитата:

Сообщение от ksa (Сообщение 483553)
Сделай тестовый пример на котором будет проявляться проблема. На нем можно будет показать варианты решения или будет понятно что у тебя не так... ;)

Вместе с html?
я че-то как не пробовал, не получается вставить рабочий код, чтобы его запустить можно было.

the_little 18.04.2018 16:12

#rem-calc .calc-section .slct { display: block; border-radius: 5px; border: 1px solid #cecece; background-color: #F6F6f6; width: 285px; padding: 4px 15px 4px 10px; color: #444; background-position: 290px -145px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; }
#rem-calc .calc-section .slct.active { border-radius: 5px 5px 0 0; border-bottom: none; }
#rem-calc .calc-section .drop { margin: 0; padding: 0; width: 310px; border: 1px solid #cecece; border-top: none; display: none; position: absolute; background: #fff; }
#rem-calc .calc-section .drop li { list-style: none; border-top: 1px dotted #e8e8e8; cursor: pointer; display: block; color: #444; padding: 4px 15px 4px 25px; background-position: 10px -119px; }
#rem-calc .calc-section .drop li:hover { background-color: #e8e8e8; color: #222; }


<div id="rem-calc">
  <form>
<div class="calc-section">
      <div class="calc-h2-title">Базовые работы</div>
      <div class="select">
      	<a href="javascript:void(0);" class="slct">Стиль</a>
      	<ul class="drop">
      		<li><a href="javascript:void(0);" class="start-calc">Стиль 1</a></li>
      		<li><a href="javascript:void(0);" class="start-calc">Стиль 2</a></li>
      		<li><a href="javascript:void(0);" class="start-calc">Стиль 3</a></li>
      	</ul>
      	<input type="text" id="base-style" />
      </div>
</div>
  </form>
</div>


// Select
$('.slct').click(function(){
	/* Заносим выпадающий список в переменную */
	var dropBlock = $(this).parent().find('.drop');
	/* Делаем проверку: Если выпадающий блок скрыт то делаем его видимым*/
	if( dropBlock.is(':hidden') ) {
		dropBlock.slideDown();
		/* Выделяем ссылку открывающую select */
		$(this).addClass('active');
		/* Работаем с событием клика по элементам выпадающего списка */
		$('.drop').find('li').click(function(){
			/* Заносим в переменную HTML код элемента
			списка по которому кликнули */
			var selectResult = $(this).text();
			/* Находим наш скрытый инпут и передаем в него
			значение из переменной selectResult */
			$(this).parent().parent().find('input').val(selectResult);
			/* Передаем значение переменной selectResult в ссылку которая
			открывает наш выпадающий список и удаляем активность */
			$(this).parent().parent().find('.slct').removeClass('active').html(selectResult);
			/* Скрываем выпадающий блок */
			dropBlock.slideUp();
		});
	/* Продолжаем проверку: Если выпадающий блок не скрыт то скрываем его */
	} else {
		$(this).removeClass('active');
		dropBlock.slideUp();
	}
	/* Предотвращаем обычное поведение ссылки при клике */
	return false;
});

$(document).ready(function() {

	var getData=new Promise(function(resolve){
		Papa.parse("/price.csv", {
			download: true,
			header: false,
			complete: function(results) {
				resolve(results.data);
			}
		});
	});

	getData.then(function(data){

		// СТОИМОСТЬ РАБОТ
		var as 			= data[0][2];			// Студия - 18 000 р\м2
		var a1 			= data[1][2];			// 1 комн. кв - 16 000 р.\м2
		var a2 			= data[2][2];			// 2 комн. кв - 14 000 р.\м2
		var a3 			= data[3][2];			// 3 и более - 13 000 руб.\м2
		var c_price = data[4][2];			// СУ 140000р

		function changeFunc() {
			// Базовые работы (списки)
			var style = $('#base-style').val();
			console.log(style);
		};

		$('#rooms-amount, #apartment-square, #sanuzel-amount, #dop-akcentwall-amount, #dop-arka-amount, #dop-radiator-amount, #dop-karniz-amount, #dop-kafel-amount, #dop-roomlight-amount, #base-style, #base-potolok, #base-color, base-floor').change(function() {
			changeFunc();
		});

		$('.start-calc').click(function() {
			changeFunc();
		});

	});
});

the_little 18.04.2018 16:14

Я подозреваю что данный скрипт не отработает, поскольку нужна библиотека которая парсит csv...

the_little 18.04.2018 16:19

Вложений: 3
скриншоты сделал
правда их так ужимает, что ничего не видать...

ksa 19.04.2018 08:54

Цитата:

Сообщение от the_little
Я подозреваю что данный скрипт не отработает, поскольку нужна библиотека которая парсит csv...

Если у тебя на получается "локализовать" проблему в тестовом примере, придется в разделе "Работа" тему создавать...
Возможно найдутся желающие по твоему сайту полазить и решить проблему.

the_little 19.04.2018 08:56

ВОпрос решился заменой скрипта на тот, который динамически изменяет внешний вид селекта, при этом структура остается штатной. И собственно там все нормально работает)

Всем спасибо!


Часовой пояс GMT +3, время: 15:49.