Тема: Проблема з лічильником в циклі
Здорів. От якщо написати такий код
var elem = document.getElementsByClassName("first");
console.log(elem.length);
onload=function(){
var height = elem[0].getElementsByTagName("li").length*37;
console.log(0);
elem[0].style.transition = ".5s 0 all ease";
elem[0].addEventListener("mouseover",function(){elem[0].style.height = height+"px";});
elem[0].addEventListener("mouseout", function(){elem[0].style.height = "42px";});
var height = elem[1].getElementsByTagName("li").length*37;
console.log(1);
elem[1].style.transition = ".5s 0 all ease";
elem[1].addEventListener("mouseover",function(){elem[1].style.height = height+"px";});
elem[1].addEventListener("mouseout", function(){elem[1].style.height = "42px";});
var height = elem[2].getElementsByTagName("li").length*37;
console.log(2);
elem[2].style.transition = ".5s 0 all ease";
elem[2].addEventListener("mouseover",function(){elem[2].style.height = height+"px";});
elem[2].addEventListener("mouseout", function(){elem[2].style.height = "42px";});
}То все працює гарно. Але якщо от так це зробити
var elem = document.getElementsByClassName("first");
console.log(elem.length);
onload=function(){
for(var i=0; i<elem.length; i++)
{
var height = elem[i].getElementsByTagName("li").length*37;
console.log(i);
elem[i].style.transition = ".5s 0 all ease";
elem[i].addEventListener("mouseover",function(){elem[i].style.height = height+"px";});
elem[i].addEventListener("mouseout", function(){elem[i].style.height = "42px";});
};
}то вилазить купа глюків
▼Прихований текст
Але якщо зробити
for(var i=0; i<elem.length-1; i++)то помилок немає, але працює все зовсім не так, як треба. Треба, щоб при наведені на відповідний <li> - змінювався саме він. А в мене якщо наводити на будь-який <li> - змінюється тільки останній по рахунку. Чому так???
