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的任何更改都会立即反映出来。

与第一次尝试代码一样，您可以使用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

Answer 2

您正在循环外创建 div元素。这意味着它只创造了一次。你需要多次。所以 put it inside the for loop 。
使用 querySelectorAll() 代替 getElementsByTagName() 。

那就是它。除了这两点之外，你的所有代码都是完美的。

Javascript逻辑/行为错误

2 个答案: