Добрый день!
Имеется следующий кусок HTML разметки:
<div id="underheader">
<div class="main_center over">
<ul>
<li>
<div class="thumb">
<a rel="link" href="#"></a>
<div class="overlay_corner"></div>
<div class="overlay_title">Современная архитектура и красивый дизайн дома</div>
<div class="overlay_like">4</div>
<img src="content/1.jpg" alt=""/>
</div>
<div class="desc">
<p class="date">Июнь 13, 2014</p>
<p class="stats"><span class="comment">2</span><span class="like">4</span></p>
<h1><a href="#" title="">Современная архитектура и красивый дизайн дома</a></h1>
</div>
</li>
</ul>
</div>
</div>
DIVы с классами "overlay_title", "overlay_like" и A (c rel=link) выполняют роль оверлэев и накладываются с помощью относительного позиционирования на картинку, следующую после них в структуре DOM-дерева. В CSS-файле данным DIVам указан visibility со значением hidden.
Задача простая до нельзя - нужно на событие наведения по гиперссылке (которая имеет атрибут rel со значение link) повесить анонимную функцию, которая бы переключала у этих двух DIVов свойство visibility на visible, при onmouseout сново на hidden.
Имеем следующий сценарий:
window.onload = function () {
//UNDERHEADER
var underheader = gi("underheader"), //underheader
a = getNode(underheader, "A", "rel", "link"), //выборка области клика
title = getNode(underheader, "DIV", "class", "overlay_title"), //выборка заголовочного оверлея
like = getNode(underheader, "DIV", "class", "overlay_like"); //выборка оверлэя с кол-вом лайков
for(var i = 0; i < a.length; i++) {
a[i].onmouseover = function(){visible(title[i]); visible(like[i]);};
a[i].onmouseout = function(){invisible(title[i]); invisible(like[i]);};
}
};
//ф-я выборки узлов tag из obj по атрибуту atr и его значению val
function getNode(obj, tag, atr, val) {
var el = gt(obj, tag),
res = [];
for(var i = 0; i < el.length; i++)
if(el[i].getAttribute(atr) == val) res.push(el[i]);
if(res.length) return res;
return false;
}
//ф-я выборки по id
function gi(id) {
return document.getElementById(id);
}
//ф-я выборки по tagname
function gt(obj, tag) {
return obj.getElementsByTagName(tag);
}
function invisible(obj) {
obj.style.visibility = "hidden";
}
function visible(obj) {
obj.style.visibility = "visible";
}
При запуске консольки браузеров выдают такой error:
|
Код:
|
Uncaught TypeError: Cannot read property 'style' of undefined |
Все узлы выбраны верно. Теперь меняем сценарий так, чтобы на события назначались функции не в цикле for, в ручную, то есть просто убираем цикл:
a[0].onmouseover = function(){visible(title[0]); visible(like[0]);};
a[0].onmouseout = function(){invisible(title[0]); invisible(like[0]);};
И вуаля всё работает, но само собой так делать бред, ибо таких блоков у меня много и они дёргаются из БД. Пробовал через addEventListener, выдаёт аналогичную ошибку:
|
Код:
|
Uncaught TypeError: Cannot read property 'addEventListener' of undefined |
Такое ощущение, что какой-то косяк с областями видимости или что-то типо того, но убейте не могу понять, где я накосячил. Я чего-то не понимаю?
