Присвоение класса по возрастанию

[psywalker]

У нас есть:

	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
	</ul>

	<div id="content">

	</div>

Расширять код по моим условиям мы больше не имеем права. Пользоваться только JS

Задача:

При нажатии на li в контейнере <div id="content"> должен появится элемент <div>, причём не просто <div>, а с классом того li, который мы нажали. Например нажали мы на третий li, значит появился <div class='3'>(ну это так, как пример, чтобы смысл был понятен)

Чего я сумел добиться:

	var content = document.getElementById('content')
	var div = content.getElementsByTagName('div')
	var ul = document.getElementsByTagName('ul').item(0)
	var li = ul.getElementsByTagName('li')


	for(var i=0; i<li.length;i++){
			var num = li.item(i).innerHTML
			li.item(i).onclick = function (){test2(this,num)}
	}


	function test2(node,num){

		var al = document.createElement('div')
		content.appendChild(al)
		al.className = 'class'+num
	}

Вопросы:

1) Ведь по-идее я пробегаюсь циклом по всем li, и с каждой итерацией записываю в переменную num разные значения, а затем в Этой-же итерации я вешаю онклики на li, которые опять-же соответствуют своей итерации li.item(i), в которых я вызываю функцию test2(this,num) с аргументами на саму ноду и ИМЕННО числом, соответствующим li.item(i).innerHTML.

Тогда вопрос, почему в итоге при нажатии на любой из li я получаю в контейнере див, но только именно с <div class="class4"> ???

2) Почему мой код НЕ работает без вот этой записи: var div = content.getElementsByTagName('div') ? Нафига она вообще нужна, если меня в принципе не интересует дочерние элементы, я же создаю элемент следующим способом var al = document.createElement('div') ?

[hf3]

все таки “;” надо ставить.

  Quote

var num = li.item(i).innerHTML

Вот это скорее всего вообще не нужно - ведь в боевых условиях там будет совсем другой контент. И зачем сслыка на ноду.

лучше так

li.item(i).onclick = function (){test2(i)}

Мне так кажется.

[psywalker]

hf3

  Quote

все таки “;” надо ставить.

Согласен

  Quote

var num = li.item(i).innerHTML

Вот это скорее всего вообще не нужно - ведь в боевых условиях там будет совсем другой контент. И зачем сслыка на ноду.

Так-же полностью поддерживаю, но это я для начала, далее буду усложнять условия.

  Quote

лучше так

li.item(i).onclick = function (){test2(i)}

Ничего не меняет

[psywalker]

Значит получил почти то, что хотел, таким способом:

	for(var i=0; i<li.length;i++){
			li.item(i).onclick = function (){test2(this)}
	}


	function test2(node){
		var num = node.innerHTML
		var al = document.createElement('div')
		content.appendChild(al)
		al.className = 'class'+num

	}

Но есть вопросы:

1) Как мне добиться того-же, но только без этого node.innerHTML, ведь и правда же вариант очень плохой.

[hf3]

Номер ноды в массиве списка - как раз равен иннерХТМЛ

Поэтому и предлагаю

li.item(i).onclick = function (){test2(i)}

только i+1 так как в массиве с 0 , а классы с 1.

И сразу в test2 получишь num вместо var num = node.innerHTML

[psywalker]

  hf3 said:

Номер ноды в массиве списка - как раз равен иннерХТМЛ

Поэтому и предлагаю

li.item(i).onclick = function (){test2(i)}

только i+1 так как в массиве с 0 , а классы с 1.

И сразу в test2 получишь num вместо var num = node.innerHTML

Ну ка погодика, а покажи весь работающий код плиз

[hf3]

 for(var i=0; i<li.length;i++){
			li.item(i).onclick = function (){test2(i+1)}
	}

Каждому элементу списка мы присваиваем функцию тест2 с параметром на 1 больше (i+1) чем номер элемента в списке т.е.

например для первого элемента (li[0]) - test2(1) для втрого (li[1]) будет test2(2)

в итоге в функции test мы сразу будем иметь номер который и подставляем к классу .

з.ы. - рабочий код не могу показать - так как не за “боевой” машиной.

[psywalker]

  hf3 said:

 for(var i=0; i<li.length;i++){
			li.item(i).onclick = function (){test2(i+1)}
	}

Каждому элементу списка мы присваиваем функцию тест2 с параметром на 1 больше (i+1) чем номер элемента в списке т.е.

например для первого элемента (li[0]) - test2(1) для втрого (li[1]) будет test2(2)

в итоге в функции test мы сразу будем иметь номер который и подставляем к классу .

з.ы. - рабочий код не могу показать - так как не за “боевой” машиной.

Да не дружище, полная хрень всё это.

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

Я не пойму юмора, алертом проверяю, и почему то вот эта хрень всегда последнюю передаёт итую i for(var i=0; i<li.length;i++){

li.item(i).onclick = function (){test2(this,i)}

}

Именно 4 в моём случае.

Но почему? Ведь каждому li ведь достаётся по идее своя? В чём подвох?

hf3

А я понял, что ты имеешь ввиду, но твоя тема не прокатывает. В моём случае почему-то всегда число 4 получается. Т.е. я как бы понимаю, что это за число, это последняя i, но это ведь странно, потому-что цикл то идёт и передаёт в каждой итерации разные i разным li. Поэтому я и в тупике!!!

[hf3]

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

а вот рабочий вариант

<script type="text/javascript">
<!--
	var content = document.getElementById('content');
	var ul = document.getElementsByTagName('ul')[0];
	var li = ul.getElementsByTagName('li');


	for(var i=0; i<li.length;i++)
	{
		li[i].onclick = test2;
		li[i].num = i+1;
	}


	function test2(){
		content.className = 'class'+this.num;
	}
//-->
</script>

Но почему? Ведь каждому li ведь достаётся по идее своя? В чём подвох?

как я сам уже понял - параметры передачи функции он не запоминает для каждого элемента, так что такой финт ушами не пройдет. выше гораздо более элегантное решение.

[psywalker]

Слушай, приколько, а можешь подробно объяснить, как всё это работает? Желательно с комментами возле кода

[hf3]

ну поскольку все элементы DOM -объекты то для них действуют все правила - объектов.

т.е им можно присваивать свои свойства и методы

 li[i].num = i+1;

вот тут всем объектам ЛИ присваивается свойство num равное текущему i + 1

	function test2(){
		content.className = 'class'+this.num;
	}

Функция вызывается для каждого объекта своя - следовательно this - ссылается на объект вызвавший фунцкию - следовательно мы имеем доступ ко всем свойсвам этого объекта - в том числе и num

з.ы. Наверное сумбурно немного объяснил)

[psywalker]

Аа, т.е. смотри

li.onclick = test2; - вот этим самым, мы вешаем онклики на каждый li, только для каждого свой? Как-бы закладываем функцию, а не вызов?

Объясни это поподробнее плиз, чем отличается и т.д.

li.num = i+1; - а тут мы просто создаём для каждой ноды свойство num, которое ссылается на i+1, и в итоге выходит, что у нашего li есть свойство, как бы число, на которое мы можем потом сослаться?

[hf3]

  Quote

что у нашего li есть свойство, как бы число, на которое мы можем потом сослаться?

аха.

  Quote

li.onclick = test2;

Это присваивание ссылки на функцию test2 всем эелементам .

Тоже самое что

  Quote

li.item(i).onclick = function (){test2(this,num)}

только букв меньше

[psywalker]

  Quote

li.onclick = test2;

Это присваивание ссылки на функцию test2 всем эелементам .

Тоже самое что

Цитата

li.item(i).onclick = function (){test2(this,num)}

только букв меньше

Нихрена, в том то и дело, что не то же самое. Этот вариант НЕ пашет li.item(i).onclick = function (){test2(this,num)}, а твой пашет. Поэтому этот вопрос очень для меня интересен и хотелось-бы получить развёрнутый ответ!

Вот код, погляди

<script>

	var content = document.getElementById('content');
	var div = content.getElementsByTagName('div');
	var ul = document.getElementsByTagName('ul').item(0);
	var li = ul.getElementsByTagName('li');


	for(var i=0; i<li.length;i++){
		li.item(i).onclick = function (){test2()}

		li[i].num = i+1;
	}


	function test2(){




		var al = document.createElement('div');
		content.appendChild(al);

		al.className = 'class'+this.num;
		al.innerHTML='Text'+this.num;

	};	


</script>

[hf3]

  Quote

НЕ пашет li.item(i).onclick = function (){test2(this,num)},

вернее вот так li.item(i).onclick = function (){test2()} ошибся малость.

будет одно и тоже что мой вариант. а параметры при каждом вызове функции берутся текущие, а не что были при присвоение обработчика. А так получается просто лишнияя работа - зачем присваивать функцию , которая вызывает тест2 если можно сразу присвоить тест2 ?

Самым лучшем вариантом разобраться - будет прогонка пошаговая сценария в файербаге или девелоперс тулзе.

Edited April 4, 2010 by hf3

[psywalker]

  hf3 said:

вернее вот так li.item(i).onclick = function (){test2()} ошибся малость.

будет одно и тоже что мой вариант. а параметры при каждом вызове функции берутся текущие, а не что были при присвоение обработчика. А так получается просто лишнияя работа - зачем присваивать функцию , которая вызывает тест2 если можно сразу присвоить тест2 ?

Самым лучшем вариантом разобраться - будет прогонка пошаговая сценария в файербаге или девелоперс тулзе.

Дружище, посмотри внимательнее, я так и пишу

for(var i=0; i<li.length;i++){

li.item(i).onclick = function (){test2()} - НЕ пашет!!!

//li.onclick = test2;

li.num = i+1;

}

Вот полный пример:

<script>

	var content = document.getElementById('content');
	var div = content.getElementsByTagName('div');
	var ul = document.getElementsByTagName('ul').item(0);
	var li = ul.getElementsByTagName('li');


	for(var i=0; i<li.length;i++){
		li.item(i).onclick = function (){test2()}
		//li[i].onclick = test2;
		li[i].num = i+1;
	}


	function test2(){
		var al = document.createElement('div');
		content.appendChild(al);

		al.className = 'class'+this.num;
		al.innerHTML='Text'+this.num;

	};	


</script>

Мало того, это вроде разные вещи, смотри:

1) li.item(i).onclick = function (){test2()} - Вот этим самым мы вешаем обработчики онклик на li, которые при нажатии вызывают функцию

2) li.onclick = test2; - А вот этим мы походу вешаем обработчик, но только уже с результатом функции, т.е. присваиваем сам результат

Тут есть тонкости, которые способен разъяснить один человек на планете, его кажется s0rr0w называют

[hf3]

действительно…

Значит и правда мой косяк… Я пока в таких тонкостях не силен…

Наверное это из того li.item(i).onclick - это метод объекта, а function (){test2()} - это объект функции. Т.е. типы несоответсвуют

А li.onclick = test2; - это просто ссылка на другой метод (функцию test)

[psywalker]

  hf3 said:

действительно…

Значит и правда мой косяк… Я пока в таких тонкостях не силен…

Наверное это из того li.item(i).onclick - это метод объекта, а function (){test2()} - это объект функции. Т.е. типы несоответсвуют

А li.onclick = test2; - это просто ссылка на другой метод (функцию test)

А я вот сам запутался, нужен великий и ужасный, чтобы всё объяснил правильно

[psywalker]

В общем короче интересная и странная тема одновременно.

Смотри пример:

	<input type="submit" value="Нажать" />
	<a href="#" id="a">Нажать меня срочно!!!</a>

		function h(){alert(2)}
var a = document.getElementById('a')
	var input = document.getElementsByTagName('input').item(0)
	input.onclick = h
	a.onclick = function (){h()}

Что так: input.onclick = h

Что так: a.onclick = function (){h()}

Работает одинаково.

Но всё это странно, так как точно я помню, в них были различия, что-то тут не просто так всё.

Надеюсь, что s0rr0w и правда разъяснит ситуацию.

[hf3]

Меня терзают смутное сомнение что тут просто контекст исполнения разный

в 1 случае this - ссылается на объект вызвавший функцию - поэтому this.num - работает

а во 2 случае this ссылается на саму функцию - поэтому this.num и не работает, а alert - работает.

[s0rr0w]

  psywalker said:

Мало того, это вроде разные вещи, смотри:

1) li.item(i).onclick = function (){test2()} - Вот этим самым мы вешаем обработчики онклик на li, которые при нажатии вызывают функцию

2) li.onclick = test2; - А вот этим мы походу вешаем обработчик, но только уже с результатом функции, т.е. присваиваем сам результат

Тут есть тонкости, которые способен разъяснить один человек на планете, его кажется s0rr0w называют

Второй пример ничем не отличается от первого. В первом просто вызов обернут в анонимную функцию. А во втором ты напрямую присваиваешь функцию-обработчик. Чтобы присваивать результат, должен быть вызов функции - test2()

  psywalker said:

Но почему? Ведь каждому li ведь достаётся по идее своя? В чём подвох?

Подвох в том, что каждая функция получает ссылку на одну и ту же переменную i. А чему равно значение после окончания цикла? Правильно, последнему значению i, которое получилось после выхода из цикла.

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

[psywalker]

  Quote

Второй пример ничем не отличается от первого. В первом просто вызов обернут в анонимную функцию. А во втором ты напрямую присваиваешь функцию-обработчик.

1) А что такое анонимная функция?

2) И что такое функция обработчик?

  Quote

Чтобы присваивать результат, должен быть вызов функции - test2()

Ааа, т.е. вот именно таким путём присваивается результат, например переменным?

  Quote

Подвох в том, что каждая функция получает ссылку на одну и ту же переменную i. А чему равно значение после окончания цикла? Правильно, последнему значению i, которое получилось после выхода из цикла.

Но погоди, ведь итерация разная и переменные соответственно тоже ведь меняются?

  Quote

или делать замыкание.

Что такое замыкание и как оно делается?

[s0rr0w]

  psywalker said:

1) А что такое анонимная функция?

Это функция без имени. Например return function(){ this.name = "anonymous" }

Мы вернули объект, который является функцией. (Все функции являются объектом)

  psywalker said:

2) И что такое функция обработчик?

Это логическое понятие. Например, ты устраиваешь вечеринку. Если кто-то хочет потусоваться с тобой, то он подает заявление на участие в тусовке. Ты будешь танцевать, а кто-то на этой тусовке будет водку жрать. Процесс жрания водки и есть функция-обработчик

  psywalker said:

Ааа, т.е. вот именно таким путём присваивается результат, например переменным?

Да.

  psywalker said:

Но погоди, ведь итерация разная и переменные соответственно тоже ведь меняются?

Да, значение переменной меняется, только вот все эти функции ссылаются на одну и ту же переменную.

  psywalker said:

Что такое замыкание и как оно делается?

В гугле по этому поводу тонны материала

Edited April 4, 2010 by s0rr0w

[hf3]

  Quote

Это логическое понятие. Например, ты устраиваешь вечеринку. Если кто-то хочет потусоваться с тобой, то он подает заявление на участие в тусовке. Ты будешь танцевать, а кто-то на этой тусовке будет водку жрать. Процесс жрания водки и есть функция-обработчик

Педагогический талант)

Я как то проще себе это представлял)

  Quote

В гугле по этому поводу тонны материала

дабы не мучить гугла лишний раз - http://rutracker.org/forum/viewtopic.php?t=1963980

[psywalker]

  Quote

1) А что такое анонимная функция?

Это функция без имени. Например return function(){ this.name = "anonymous" }

Мы вернули объект, который является функцией. (Все функции являются объектом)

Т.е. выходит что эта такие спецовые функции, в которых можно писать всё что угодно, как-бы они онанимные, ну вот например: li.item(i).onclick = function (){ var num='dfssaffa'; var input = document.getElementsByTagName('input').item(0)} И т.д. То есть можно в них что угодно писать и присваивать их чему угодно в качестве Онклика? И тогда при клике на этот элемент они будут исполняться, т.е. что у них в скобках? В нашем случае например мы в скобках вызвали просто функцию.

  Quote

li.onclick = test2

А в этом случае мы просто сослались сразу на функцию test2, какбы в онклик засунули?

  Quote

Это логическое понятие. Например, ты устраиваешь вечеринку. Если кто-то хочет потусоваться с тобой, то он подает заявление на участие в тусовке. Ты будешь танцевать, а кто-то на этой тусовке будет водку жрать. Процесс жрания водки и есть функция-обработчик

  Quote

Но погоди, ведь итерация разная и переменные соответственно тоже ведь меняются?

Да, значение переменной меняется, только вот все эти функции ссылаются на одну и ту же переменную.

Аа,наверное потому-что это Ссылочный тип данных, как и массивы, объекты и т.д?

[Great Rash]

psywalker, тут про замыкания поднимали:

http://forum.htmlbook.ru/index.php?showtopic=20112

http://forum.htmlbook.ru/index.php?s=&...st&p=144490

А тут есть статья полезная на эту тему:

http://habrahabr.ru/blogs/webdev/38642/