JavaScript 逻辑/行为错误

Question

我想在您将鼠标悬停在网站图像上时添加叠加层。我在这里实现了这个，它工作正常http://jsfiddle.net/stujLbjh/

这是js代码:

var divs = document.querySelectorAll('.image-thumb');

for (var i = 0; i < divs.length; i++) 
{
    var overlay = document.createElement('a')
    overlay.className = 'icon-overlay';
    overlay.href = '#';

    divs[i].appendChild(overlay);

    divs[i].onmouseover = function () {
        this.querySelector('.icon-overlay').style.display = 'block';}
    divs[i].onmouseout = function () {
        this.querySelector('.icon-overlay').style.display = 'none';}
    overlay.onclick = function()  {
        alert("clicked");}
}

此外，我想摆脱 html 中包含 imgs 的那些 div 声明，并直接从 javascript 动态添加它们，以便获得与第一个 jsfiddle 相同的结果，但行为很奇怪，我错过一些东西。您可以在这里看到:http://jsfiddle.net/uwrae91p/1/

有什么提示吗？

扎克。

Answer 1

问题是您在尝试检索图像时使用 getElementsByTagName()。此方法是 Live NodeList，因此对 DOM 的任何更改都会立即反射(reflect)。

就像您的第一次代码尝试一样，您可以只使用 querySelectorAll()。

var imgs = document.querySelectorAll('img');

for (var i = 0; i < imgs.length; i++) {
    var div = document.createElement('div')
    div.className = 'image-thumb';

    var overlay = document.createElement('a')
    overlay.className = 'icon-overlay';
    overlay.href = '#';

    div.appendChild(imgs[i]);
    div.appendChild(overlay);
    document.body.appendChild(div);

    div.onmouseover = function () {
        this.querySelector('.icon-overlay').style.display = 'block';
    }
    div.onmouseout = function () {
        this.querySelector('.icon-overlay').style.display = 'none';
    }
    overlay.onclick = function () {
        alert("clicked");
    }
}

Demo

document.querySelectorAll

document.getElementsByTagName