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

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') ?

psywalker · April 6, 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/

Спасибо тебе камрад, по ним у меня тоже будут вопросы, но для начала хотелось-бы получить ответы на эти, если можно: http://forum.htmlbook.ru/index.php?s=&...st&p=144958

mishka · April 6, 2010

Макс, зацени чего я наворотил:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>js test</title>
	<style type="text/css">
		ul{list-style:none;}
		li{cursor:pointer;}
		li:hover,
		li.active{background:#c3ede6;}
		.class1,
		.class2,
		.class3{
			width:50px;
			height:50px;
			border:1px solid #000;
			background:#f00;
		}
		.class2{background:#ff0;}
		.class3{background:#00f;}
	</style>
	<script type="text/javascript"><!--
		function initScript(){
			var _li = document.getElementById('toggles').getElementsByTagName('li');
			var _cont = document.getElementById('content');
			for (var i = 0; i < _li.length; i++){
				_li[i].onclick = function(){
					_clearClass();
					this.className += ' active';
					_createElement(this.innerHTML);
				}
			}
			_clearClass = function(){
				for (var i = 0; i < _li.length; i++){
					_li[i].className = _li[i].className.replace('active','');
				}
			}
			_createElement = function(num){
				var _div = document.createElement('div');
				_div.className='class'+num;
				_cont.innerHTML='';
				_cont.appendChild(_div);
			}
		}

		if(window.addEventListener)window.addEventListener("load",initScript,false);
		else if(window.attachEvent)window.attachEvent("onload",initScript);
	//--></script>
</head>
<body>
	<ul id="toggles">
		<li>1</li>
		<li>2</li>
		<li>3</li>
	</ul>
	<div id="content"></div>
</body>
</html>

psywalker · April 7, 2010

Медведь, а вот какой я вариант матанул:

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

Как тебе вообще? :angry:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>js test</title>
	<style type="text/css">
		ul{list-style:none;}
		li{cursor:pointer;}
		li:hover,
		li.active{background:#c3ede6;}
		.class1,
		.class2,
		.class3{
			width:50px;
			height:50px;
			border:1px solid #000;
			background:#f00;
		}
		.class2{background:#ff0;}
		.class3{background:#00f;}
	</style>

</head>
<body>
	<ul id="toggles">
		<li>1</li>
		<li>2</li>
		<li>3</li>
	</ul>
	<div id="content"></div>	


	<script type="text/javascript">
		var tog = document.getElementById('toggles')
		var li = tog.getElementsByTagName('li')
		var content = document.getElementById('content')
		var divC = content.getElementsByTagName('div')

		for(var i=0;i<li.length;i++){
			li[i].num = i+1
			li[i].onclick = function(){ 				
				for(var i=0;i<divC.length;i++)divC[i].parentNode.removeChild(divC.item(i))
				var div = document.createElement('div')
				content.appendChild(div)
				div.className = 'class'+this.num
			}
		}
	</script>
</body>
</html>

mishka · April 7, 2010

Норм, коротко и ясно :angry:

Great Rash · April 7, 2010

Спасибо тебе камрад, по ним у меня тоже будут вопросы, но для начала хотелось-бы получить ответы на эти, если можно: http://forum.htmlbook.ru/index.php?s=&...st&p=144958

Анонимные функции хороши тем, что мы можем на одно событие выполнить несколько действий, как в обычной функции, а не только одно, как в случае с вызовом непосредственно вункции. Например:

object.onclick = foo; // тут мы вызвали функцию foo(); и все

object.onclick = function() { // тут мы выполняем какие-либо действия
	var x = someValue; // к примеру назначаем какую-либо переменную
	foo(someValue); // и передаем ее в функцию в качестве параметра

	foo(this); // или передаем в функцию ключевое слово this, которое ссылается на объект object
}

Почему нельзя обойтись без замыканий я и сам не понимаю (не хватает теоретических знаний), был бы рад если б кто-нибудь объяснил.

psywalker · April 7, 2010

Норм, коротко и ясно

Мне кажется, это ещё не предел, хотелось-бы увидеть вариант покороче и поинтереснее...

Ладненько, смотри Медведь, какую тему задумал, чтобы классы не вешать, можно цвета рандомить прикольно: Чё думаешь?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>js test</title>
	<style type="text/css">
		ul{list-style:none;}
		li{cursor:pointer;}
		li:hover,
		li.active{background:#c3ede6;}
	div#content div{
		width: 50px;
		height: 50px;
		border: 1px solid #000;
	}
	</style>

</head>
<body>
	<ul id="toggles">
		<li>1</li>
		<li>2</li>
		<li>3</li>
	 </ul>
	<div id="content"></div>	


	<script type="text/javascript">
		var tog = document.getElementById('toggles')
		var li = tog.getElementsByTagName('li')
		var content = document.getElementById('content')
		var divC = content.getElementsByTagName('div')

		for(var i=0;i<li.length;i++){
			li[i].onclick = function(){
				var bg1 = Math.round(Math.random()*99)
				var bg2 = Math.round(Math.random()*99)
				var bg3 = Math.round(Math.random()*99)		
				for(var i=0;i<divC.length;i++)divC[i].parentNode.removeChild(divC.item(i))
				var div = document.createElement('div')
				content.appendChild(div)
				div.style.background = 'rgb('+bg1+'%,'+bg2+'%,'+bg3+'%)' 
			}
		}
	</script>
</body>
</html>

psywalker · April 10, 2010

Анонимные функции хороши тем, что мы можем на одно событие выполнить несколько действий, как в обычной функции, а не только одно, как в случае с вызовом непосредственно вункции. Например:
object.onclick = foo; // тут мы вызвали функцию foo(); и все

object.onclick = function() { // тут мы выполняем какие-либо действия
	var x = someValue; // к примеру назначаем какую-либо переменную
	foo(someValue); // и передаем ее в функцию в качестве параметра

	foo(this); // или передаем в функцию ключевое слово this, которое ссылается на объект object
}
Почему нельзя обойтись без замыканий я и сам не понимаю (не хватает теоретических знаний), был бы рад если б кто-нибудь объяснил.

Спасибо тебе дружище за небольшое разъяснение, но вот имеются вопросы по этой теме:

1) Зачем всё же нужны замыкания?

2) Мне кстати наиболее симпатичен вариант со свойствами ноды, а почему-бы и нет?

3) И всё же на эти вопросы если кто сможет, тоже ответьте плиз

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

4) А ещё у меня вопрос:

Тут написано:

for (var i = 0; i < links.length; i++) {
links.onclick = function() {
alert(i);
}
}
На деле же оказывается, что при клике на любую ссылку выводится одно и то же число — значение links.length. Почему так происходит? В связи с замыканием объявленная вспомогательная переменная i продолжает существовать, при чём и в тот момент, когда мы кликаем по ссылке. Поскольку к тому времени цикл уже прошёл, i остаётся равным кол-ву ссылок — это значение мы и видим при кликах.

Я вот не могу въехать, ну нажимаем мы на ссылку, вызываем функцию, НО а в ней же Алерт ссылается именно на наш i, почему на последний-то?

Great Rash · April 12, 2010

Alert срабатывает уже после того как отработал весь скрипт (видимо и события навешиваются так же), вот и получается, что для всех этих функций в конце скрипта переменная i переопределяется. Это все мои предположения конечно.

Мне кстати наиболее симпатичен вариант со свойствами ноды, а почему-бы и нет?

Потому, что обращение к DOM (присвоение ноде доп. свойства), занимает больше времени чем вызов функцией самой себя (при замыкании).

s0rr0w · April 12, 2010

Alert срабатывает уже после того как отработал весь скрипт (видимо и события навешиваются так же), вот и получается, что для всех этих функций в конце скрипта переменная i переопределяется. Это все мои предположения конечно.

"Навешивание" происходит сразу после присвоения функции. Контекст у этих функций один, поэтому обработчик находит i в контексте той функции, которая присваивала этот самый обработчик.

Потому, что обращение к DOM (присвоение ноде доп. свойства), занимает больше времени чем вызов функцией самой себя (при замыкании).

При замыкании функция не вызывает сама себя. Она просто сохраняет контекст.

И не факт, что обращение к свойствам будет дольше. Есть бенчмарк, который это подтвердит?

Great Rash · April 13, 2010

И не факт, что обращение к свойствам будет дольше. Есть бенчмарк, который это подтвердит?

Хотя мой мегабенчмарк не совсем обективен:

<script type="text/javascript">
	window.onload = function() {
		var obj = document.getElementById('test');
		var divs = obj.getElementsByTagName('div');
		var d = new Date();
		var t1 = d.getMilliseconds();

		for (var i = 0; i < divs.length; i++) {
			/* раскомментируй меня, чтобы поработать с нодами
			divs[i].somevar = i;
			divs[i].innerHTML = divs[i].somevar;
			*/

			// закомементируй меня чтобы посмотреть как бытро работается с нодами
			(function(i) {
				divs[i].innerHTML = i;
			})(i);
		}

		d = new Date();
		var t2 = d.getMilliseconds();
		obj.innerHTML = (t2 - t1) + 'ms';
	}
</script>


<!-- HTML такой: -->
<div id="test">
	<div></div>
	<div></div>
	<div></div>
	...
	<!-- всего 2112 дивов -->
	<div></div>
</div>

С замыканиями 226-237ms, с присвоением свойства ноде - 223-238ms. В общем вы правы, разницы почти нет.

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

Join the conversation

Обсуждения

Important Information