Как запомнить потомка, пототомов у родительского элемента?
Нужно запомнить нажатие на ссылку. Вот с потомками 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>
|
Раскрасска всегда аналогична...
<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>
|
как покрасить через массив узла parentNode?
Спасибо за ответ, можно сделать как вы,(можно через jquery) но я хочу сделать через массив узла parentNode, так как хочу изучить javascript. сотрите стр. 45.
|
те. надо в функции onLIClick получить цвет текущей ссылки, по которой кликнули и записать её а потом это свойство использовать.
|
Выход почти нашёл, При клике на ту-же ссылку цвет уже сбрасывается(как и задумал)только вот при переходе на другую ссылку нет. Помогите доработать.
<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>
|
Сделано. Выход нашёл сам! вот правильное решение для элементов <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;
}
|
| Часовой пояс GMT +3, время: 10:15. |