Замыкания

[psywalker]

Добрый день!

Мужики, вот интересно увидеть примеры, где без замыканий никуда не деться. Т.е. нельзя его обойти и нужно применить именно их.

[psywalker]

http://forum.htmlbook.ru/index.php?s=&...st&p=140418 - вот та темка. До сих пор для меня актуальна...)

Если я правильно понял, то:

1) Есть форма, в ней есть импуты.

2) Находим в форме input type="radio"

3) Смотрим, у кого из них checked="checked";

4) И далее если таковые имеются, ихним родителям меняем класс?

[DjTarik]

Если я правильно понял, то:

1) Есть форма, в ней есть импуты.

2) Находим в форме input type="radio"

3) Смотрим, у кого из них checked="checked";

4) И далее если таковые имеются, ихним родителям меняем класс?

Ну, не совсем родителям (там и родители, и соседи), но смысл такой же. Класс меняем в цикле на события мыши. Именно из-за этого нужны замыкания. Сам не знаю почему, но без них не получается...

[psywalker]

Смотри, у тебя по ссылке значит:

1) Есть две формы, в верхней переключатели, в нижней сами импуты, которые должны быть стили стилизованные?

2) Т.е. я жму на один из верхних переключателей, допустим - Второй.

3) Далее внизу под нижней формой, я жму кнопку и он должен уже ставить Второму нижнему импуту checked="checked";, и менять класс у его родителя?

[DjTarik]

Смотри, у тебя по ссылке значит:

1) Есть две формы, в верхней переключатели, в нижней сами импуты, которые должны быть стили стилизованные?

2) Т.е. я жму на один из верхних переключателей, допустим - Второй.

3) Далее внизу под нижней формой, я жму кнопку и он должен уже ставить Второму нижнему импуту checked="checked";, и менять класс у его родителя?

Не-не-не) Верхняя форма - это так, для сравнения - типо как было по умолчанию - а нижняя (с ней скрипт и работает) - это стилизованная. Так что сама по себе верхняя нафиг не надо и не используется.

[psywalker]

Понял, значит делаем так, работаем только с нижней формой, одной.

1) Сначала жмём на импут, он становится checked="checked";

2) Далее жмём на кнопку под формой и в этот момент уже скрипт ищет этот импут с checked="checked"; и меняет класс у его родителя?

[DjTarik]

Понял, значит делаем так, работаем только с нижней формой, одной.

1) Сначала жмём на импут, он становится checked="checked";

2) Далее жмём на кнопку под формой и в этот момент уже скрипт ищет этот импут с checked="checked"; и меняет класс у его родителя?

=) Кнопка - это только для проверки того, какой инпут выбран. Всё. Так что кнопка тоже нафиг.

Там просто меняются классы у спанов при наведении и на клик. Три разных состояния.

[psywalker]

Хаа, блин, вот ты даёшь. Тада делаем так

1) Запускаем скрипт, ищем импуты с checked="checked";

2) И уже их родителям, а выходит Спану, меняем класс?

Но тогда вопрос: А что и как тада до этого будет менять checked="checked"; у импутов?

[DjTarik]

Хаа, блин, вот ты даёшь. Тада делаем так

1) Запускаем скрипт, ищем импуты с checked="checked";

2) И уже их родителям, а выходит Спану, меняем класс?

Но тогда вопрос: А что и как тада до этого будет менять checked="checked"; у импутов?

=) Смотри какая идея:

1. Всё происходит сразу после загрузки документа.

2. Берем весь массив инпутов.

3. Прячим их при помощи класса.

4. Проверяем - если какой-то из них выбран (checked) - то присваиваем лейблу 2 события, а спану класс (radio-on)

5. Если не выбран - присваиваем лейблу 2 события, а спан оставляем как есть (т.е. с пустым классом)

6. Когда мы кликаем, чтобы выбрать - запускаем рекурсию, и все запускается снова

У меня в работает, кроме Оперы и с замыканиями. Это сразу 2 проблемы.

[psywalker]

=) Смотри какая идея:

1. Всё происходит сразу после загрузки документа.

2. Берем весь массив инпутов.

3. Прячим их при помощи класса.

4. Проверяем - если какой-то из них выбран (checked) - то присваиваем лейблу 2 события, а спану класс (radio-on)

5. Если не выбран - присваиваем лейблу 2 события, а спан оставляем как есть (т.е. с пустым классом)

6. Когда мы кликаем, чтобы выбрать - запускаем рекурсию, и все запускается снова

У меня в работает, кроме Оперы и с замыканиями. Это сразу 2 проблемы.

Понял, а вопросы тада:

1)

3. Прячим их при помощи класса.

Т.е. изначально у всех импутов стотит класс, который их прячет, назовём его .hidden?

2)

4. Проверяем - если какой-то из них выбран (checked) - то присваиваем лейблу 2 события, а спану класс (radio-on)

Т.е. если у какого то импута стотит checked=checked, то его лейблу 2 события? а его спану класс radio-on?

А какие события присваивать лейблу?

А кто изначально ипутам вешает checked=checked? И как? И каким?

[DjTarik]

Понял, а вопросы тада:

1)

Т.е. изначально у всех импутов стотит класс, который их прячет, назовём его .hidden?

2)

Т.е. если у какого то импута стотит checked=checked, то его лейблу 2 события? а его спану класс radio-on?

А какие события присваивать лейблу?

А кто изначально ипутам вешает checked=checked? И как? И каким?

1. По умолчанию (до загрузки body) - инпуты видны. Как только сработало 'onload' - присвоили класс (hide-input). (Ну как бы без JS тоже должен работать сайт =)

2. Да. События лейблу (а соответственно и всё что в нём):

Если выбран инпут - 'onmouseover' и 'onmouseout'.

Если не выбран - 'onmouseover', 'onmouseout' и onclick (для рекурсии)

Спанам просто меняем классы.

Изначально - это если выбран по умолчанию или при рекурсии - тогда тому, что мы выбрали.

Тут всё есть: http://tarik.kasperovich.ru/test/index.html

[rash]

Нет потенциальных проблем с утечками памяти.

Проще дебаг.

Понятнее код.

При присваивании совйств узлам?

Гм... Вроде при динамическом изменении таких узлов они как раз жутко текут. Сам не проверял, но пугали этим как-то недавно -)

[psywalker]

А выходит, что импуты всегда будут скрыты?

[DjTarik]

А выходит, что импуты всегда будут скрыты?

У меня да. Сначала хотел поверх - но передумал, т.к. картинки буду полупрозрачными PNG - значит решил скрыть. Убирать тоже не стал - значения брать нужно именно из инпутов, т.е. создать хидден инпут и туда записвать значения не пойдет.

Да и задача не в этом.)

[s0rr0w]

При присваивании совйств узлам?

Гм... Вроде при динамическом изменении таких узлов они как раз жутко текут. Сам не проверял, но пугали этим как-то недавно -)

Как может течь присвоение свойств объектам? Если через замыкания делать, то да, будет течь. Особенно ИЕ. Особенно если присваивать свойства до того, как нода будет вставлена в DOM

[DjTarik]

Вопрос в тему:

Вот тут можно обойтись БЕЗ замыканий???:

		onload = function ()
			{
				ChangeFormValue();
			}			

		function ChangeFormValue ()
			{
				var form = document.getElementById('ChangeFormValue');	// form's id -->
				var array = form.getElementsByTagName('input');
				for (i = 0; i < array.length; i++)
					{
						el = array[i];
						el.onfocus = function ()
							{
								alert(i);
							}
					}
			}

<form action="#" method="get" id="ChangeFormValue">
			<fieldset>
				<input type="text" name="#" value="#" />
				<input type="text" name="#" value="#" />
				<input type="text" name="#" value="#" />
			</fieldset>
		</form>

Если да - то как? O_o

Edited May 16, 2010 by DjTarik

[psywalker]

Да без проблем.

		onload = function ()
			{
				ChangeFormValue();
			}			

		function ChangeFormValue ()
			{
				var form = document.getElementById('ChangeFormValue');	// form's id -->
				var array = form.getElementsByTagName('input');
				for (i = 0; i < array.length; i++)
					{
						array[i].num = i+1
						el = array[i];
						el.onfocus = function ()
							{
								alert(this.num);
							}
					}
			}

И на будущее: Давай такие же отдельные примеры для проверки.

[DjTarik]

Да без проблем.

		onload = function ()
			{
				ChangeFormValue();
			}			

		function ChangeFormValue ()
			{
				var form = document.getElementById('ChangeFormValue');	// form's id -->
				var array = form.getElementsByTagName('input');
				for (i = 0; i < array.length; i++)
					{
						array[i].num = i+1
						el = array[i];
						el.onfocus = function ()
							{
								alert(this.num);
							}
					}
			}

И на будущее: Давай такие же отдельные примеры для проверки.

Отдельные примеры, это ссылки в сети?

P.S. Макс, а можешь рассказать на словах, что именно ты сделал, чтобы избавиться от замыканий? O_o

[s0rr0w]

P.S. Макс, а можешь рассказать на словах, что именно ты сделал, чтобы избавиться от замыканий? O_o

Присвоил свойство напрямую ноде.

[DjTarik]

Присвоил свойство напрямую ноде.

Я немного не догоняю вот эту строчку:

array[i].num = i+1

зачем?

[s0rr0w]

Я немного не догоняю вот эту строчку:

array[i].num = i+1

зачем?

Создать у элемента массива array с индексом i, который является ссылкой на ноду, свойство num, которому присвоить число i+1

[psywalker]

Отдельные примеры, это ссылки в сети?

Нет, это значит Отдельные куски кода, а точнее маленькие примеры типа этого, а не целые шмотки кода с непонятными задачами, в которых можно утонуть, пока разберёшься.

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

[DjTarik]

Создать у элемента массива array с индексом i, который является ссылкой на ноду, свойство num, которому присвоить число i+1

Понял, пойду разбираться...

Нет, это значит Отдельные куски кода, а точнее маленькие примеры типа этого, а не целые шмотки кода с непонятными задачами, в которых можно утонуть, пока разберёшься.

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

ok... Там просто уже полностью готовое решение было...