Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.01.2013, 04:18
Новичок на форуме
Отправить личное сообщение для 1975andrei Посмотреть профиль Найти все сообщения от 1975andrei
 
Регистрация: 24.01.2013
Сообщений: 7

Как запомнить потомка, пототомов у родительского элемента?
Нужно запомнить нажатие на ссылку. Вот с потомками ul- я разобрался. А как запомнить потомков у li ? те. ссылку, и покрасить её в красный цвет. при клике, а при клике на другую ссылку, красит другую, а эту возвращать? Объясню по другому: Смотрите на примере. Так как красятся элементы li (без ссылок) при нажатии и снимаются, так хотелось бы чтобы красились элементы a и снимались. Заранее благодарю.
<script type="text/javascript">


	function createSomeElements(start){
	var interLI = prompt("Введите текст элемента списка","");
	//var atr = prompt("Введите атрибут для ссылки","http://www.nn.by");
	if(interLI){
		var ul = document.getElementById("list");		
		var li = document.createElement("LI"); 			
		var a = document.createElement("A"); 			
		li.onclick = onLIClick;	
			if(start)						
				ul.insertBefore(li, ul.firstChild); 
			else
				ul.appendChild(li);				
		li.insertBefore(a,li.firstChild);					
		a.setAttribute('href',"#");
		var t = document.createTextNode(interLI); 			
		li.appendChild(t);						
	}
	}
	
	

function removeFromList(start)
{
	var ul = document.getElementById('list'); 			
	
	var last = (start) ? ul.firstChild : ul.lastChild;			
	while (last && last.nodeType !=1) 			
		last = (start) ? last.nextSibling : last.previousSibling; 	
	
	if(last){										
		if (confirm("Удалить пункт "+(last.firstChild.nodeValue || last.firstChild.text)+"?")) { 
			last.parentNode.removeChild(last)		
													
				}
}
}

function onLIClick(){
if(this.parentNode.selectedItem)
	this.parentNode.selectedItem.style.color="";
this.style.color ="red";
this.parentNode.selectedItem = this;
}

window.onload = function(){
	var ul = document.getElementById("list")			
	var lis = ul.getElementsByTagName("*")			
		for(var i=0; i < lis.length; i++)			
			lis[i].onclick = onLIClick;	

}

</script>



<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
<title>Главная | заготовка</title>

</head>

<body>
    <div id="wrap">
        <div id="header">
	        <h1>javaScript <span>для начинающих</span></h1>
	        <h3>демонстрационный сайт</h3>
        </div>
		
	</div>
<br/>
<h1>Создание элементов</h1>
	<div id="ss">
		<a href="javascript:createSomeElements(true)">Создать элемент li в начало</a>
		<br/>
		<a href="javascript:createSomeElements(false)">Создать элемент li в конце</a>
		<br/>
			<a href="javascript:removeFromList(true)">Удалить первый элемент </a>
		<br/>
			<a href="javascript:removeFromList(false)">Удалить последний элемент </a>
		
	</div>
<ul id="list">
<li><a href="#">Кино</a></li>
<li><a href="#">Опера</a></li>
<li>Кино</li>
<li>Опера</li>
</ul>     
		        

</body>
Ответить с цитированием
  #2 (permalink)  
Старый 25.01.2013, 08:45
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,228

Раскрасска всегда аналогична...

<style>
.on {
   color: green;
}
</style>

<ul>
   <li>Item 1</li>
   <li class='on'>Item 2</li>
   <li>Item 3</li>
   <li>Item 4 <a href='#' class='on'>Test</a></li>
</ul>
Ответить с цитированием
  #3 (permalink)  
Старый 25.01.2013, 14:49
Новичок на форуме
Отправить личное сообщение для 1975andrei Посмотреть профиль Найти все сообщения от 1975andrei
 
Регистрация: 24.01.2013
Сообщений: 7

как покрасить через массив узла parentNode?
Спасибо за ответ, можно сделать как вы,(можно через jquery) но я хочу сделать через массив узла parentNode, так как хочу изучить javascript. сотрите стр. 45.
Ответить с цитированием
  #4 (permalink)  
Старый 25.01.2013, 14:55
Новичок на форуме
Отправить личное сообщение для 1975andrei Посмотреть профиль Найти все сообщения от 1975andrei
 
Регистрация: 24.01.2013
Сообщений: 7

те. надо в функции onLIClick получить цвет текущей ссылки, по которой кликнули и записать её а потом это свойство использовать.
Ответить с цитированием
  #5 (permalink)  
Старый 25.01.2013, 16:06
Новичок на форуме
Отправить личное сообщение для 1975andrei Посмотреть профиль Найти все сообщения от 1975andrei
 
Регистрация: 24.01.2013
Сообщений: 7

Выход почти нашёл, При клике на ту-же ссылку цвет уже сбрасывается(как и задумал)только вот при переходе на другую ссылку нет. Помогите доработать.
<script type="text/javascript">


	function createSomeElements(start){
	var interLI = prompt("Введите текст элемента списка","");
	//var atr = prompt("Введите атрибут для ссылки","http://www.nn.by");
	if(interLI){
		var ul = document.getElementById("list");		
		var li = document.createElement("LI"); 			
		var a = document.createElement("A"); 			
		a.onclick = onLIClick;	
			if(start)						
				ul.insertBefore(li, ul.firstChild); 
			else
				ul.appendChild(li);				
		li.insertBefore(a,li.firstChild);					
		a.setAttribute('href',"#");
		var t = document.createTextNode(interLI); 			
		a.appendChild(t);						
	}
	}
	
	

function removeFromList(start)
{
	var ul = document.getElementById('list'); 			
	
	var last = (start) ? ul.firstChild : ul.lastChild;			
	while (last && last.nodeType !=1) 			
		last = (start) ? last.nextSibling : last.previousSibling; 	
	
	if(last){										
		if (confirm("Удалить пункт "+(last.firstChild.nodeValue || last.firstChild.text)+"?")) { 
			// если selectedItem равен тому элементу который сейчас удаляем
			//то мы этот selectedItem перед умалением сбрасываем в null
			if(last.parentNode.selectedItem ==last) // удаляем переменную те. берём удаляемый элемент li., у него берём родительский
				last.parentNode.selectedItem =null;
			last.parentNode.removeChild(last)											
			}
	}
}

function onLIClick(){
if(this.parentNode.selectedItem)
	this.parentNode.selectedItem.style.color="";
	if(this.parentNode.selectedItem !=this){
		this.style.color ="red";
		this.parentNode.selectedItem = this;
	}
	else
		this.parentNode.selectedItem =null;
	}

window.onload = function(){
	var ul = document.getElementById("list")			
	var lis = ul.getElementsByTagName("*")			
		for(var i=0; i < lis.length; i++)			
			lis[i].onclick = onLIClick;	

}

</script>
<body>
<h1>Создание элементов</h1>
	<div id="ss">
		<a href="javascript:createSomeElements(true)">Создать элемент li в начало</a>
		<br/>
		<a href="javascript:createSomeElements(false)">Создать элемент li в конце</a>
		<br/>
			<a href="javascript:removeFromList(true)">Удалить первый элемент </a>
		<br/>
			<a href="javascript:removeFromList(false)">Удалить последний элемент </a>
		
	</div>
<ul id="list">
<li><a href="#">Кино</a></li>
<li><a href="#">Опера</a></li>
<li>Кино</li>
<li>Опера</li>
</ul>     
		        
</body>
Ответить с цитированием
  #6 (permalink)  
Старый 25.01.2013, 16:57
Новичок на форуме
Отправить личное сообщение для 1975andrei Посмотреть профиль Найти все сообщения от 1975andrei
 
Регистрация: 24.01.2013
Сообщений: 7

Сделано. Выход нашёл сам! вот правильное решение для элементов <a>
Как вы думаете это правильно?
function onLIClick(){
if(this.parentNode.parentNode.selectedItem) // анализируем элементы в списке. Если есть покрашенный, то перед покраской нового элемента
	// у ранее покрашенного убираем покраску = выставляем пустую строку. как  было
	this.parentNode.parentNode.selectedItem.style.color="";
	if(this.parentNode.parentNode.selectedItem !=this){
		this.style.color ="red";	//1) красим элемент <li>, по котором кликнули в красный цвет
		this.parentNode.parentNode.selectedItem = this; //2) объекту задаём новое свойство, и в это свойство буду записывать тот элемент на который кликнул
	}
	else
		this.parentNode.parentNode.selectedItem =null;
	}
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как определить индекс элемента jeysmook jQuery 2 09.11.2012 21:03
как узнать тег элемента с помощью jQuery? Shitbox2 jQuery 2 03.11.2012 08:04
Как сделать выборку среди детей одного элемента Почемучкин jQuery 4 29.08.2012 00:51
appendChild в начало родительского элемента shilinpavel Javascript под браузер 2 19.09.2011 16:56
Изменение стиля родительского элемента при :hover дочернего lanzs Элементы интерфейса 2 16.10.2010 13:28