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

psywalker · April 4, 2010

У нас есть:

	<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 · April 4, 2010

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

var num = li.item(i).innerHTML

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

лучше так

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

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

psywalker · April 4, 2010

hf3

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

Согласен

var num = li.item(i).innerHTML
Вот это скорее всего вообще не нужно - ведь в боевых условиях там будет совсем другой контент. И зачем сслыка на ноду.

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

лучше так
li.item(i).onclick = function (){test2(i)}

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

psywalker · April 4, 2010

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

	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 · April 4, 2010

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

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

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

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

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

psywalker · April 4, 2010

Номер ноды в массиве списка - как раз равен иннерХТМЛ
Поэтому и предлагаю
li.item(i).onclick = function (){test2(i)}
только i+1 так как в массиве с 0 , а классы с 1.
И сразу в test2 получишь num вместо var num = node.innerHTML

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

hf3 · April 4, 2010

 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 · April 4, 2010

 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 · April 4, 2010

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

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

<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 · April 4, 2010

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

hf3 · April 4, 2010

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

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

 li[i].num = i+1;

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

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

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

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

psywalker · April 4, 2010

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

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

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

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

hf3 · April 4, 2010

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

аха.

li.onclick = test2;

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

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

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

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

psywalker · April 4, 2010

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 · April 4, 2010

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

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

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

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

Edited April 4, 2010 by hf3

psywalker · April 4, 2010

вернее вот так 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 · April 4, 2010

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

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

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

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

psywalker · April 4, 2010

действительно…
Значит и правда мой косяк… Я пока в таких тонкостях не силен…
Наверное это из того li.item(i).onclick - это метод объекта, а function (){test2()} - это объект функции. Т.е. типы несоответсвуют
А li.onclick = test2; - это просто ссылка на другой метод (функцию test)

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

psywalker · April 4, 2010

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

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

	<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 · April 4, 2010

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

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

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

s0rr0w · April 4, 2010

Мало того, это вроде разные вещи, смотри:
1) li.item(i).onclick = function (){test2()} - Вот этим самым мы вешаем обработчики онклик на li, которые при нажатии вызывают функцию
2) li.onclick = test2; - А вот этим мы походу вешаем обработчик, но только уже с результатом функции, т.е. присваиваем сам результат
Тут есть тонкости, которые способен разъяснить один человек на планете, его кажется s0rr0w называют

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

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

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

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

psywalker · April 4, 2010

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

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

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

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

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

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

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

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

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

s0rr0w · April 4, 2010

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

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

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

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

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

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

Да.

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

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

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

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

Edited April 4, 2010 by s0rr0w

hf3 · April 4, 2010

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

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

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

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

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

psywalker · April 5, 2010

1) А что такое анонимная функция?
Это функция без имени. Например return function(){ this.name = "anonymous" }
Мы вернули объект, который является функцией. (Все функции являются объектом)

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

li.onclick = test2

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

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

:angry:

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

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

Great Rash · April 5, 2010

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/

Sign In

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

Question

Link to comment

Share on other sites

35 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information