在动态创建的节点中更改图像

Question

最终，我希望用户能够单击节点，显示选择的图像并用他们的选择填充节点。但是，现在，我只是想测试如何在创建表时使用不同的图像 onclick 更改放置在节点中的图像。我的逻辑是否模糊？

for (r = 0; r < howOften; r++) {
        row = table.insertRow(-1);

        for (c = 0; c < numDays; c++) {
            col = row.insertCell(-1);
            img=new Image();
            img.src="../www/images/TEST.png";
            col.appendChild(img);

                img.onclick = function() {
                image1= new Image();
                image1.src="../www/images/TEST2.png";
                img=image1;     
                };
            }
        };
    document.getElementById('holdTable').appendChild(table);
};

Answer 1

当您将 img 附加到 col 时，您将附加由变量 img“指向”的图像。 如果（何时）您稍后将变量 img 更改为指向另一个值，它不会更改附加到 col 的内容。您可以通过在 appendChild 之后添加 img = 'hello'; 来测试它 - 您会发现 img 是附加的，而不是 'hello'。

在onclick函数中，当你把img改成“指向”image1时，并不会改变追加到col的图片。

如果您想真正更改附加到 dom 的内容，您需要删除 Image 并在其位置插入另一个对象。

但幸运的是，您想要的是带有另一个 src 的图像，因此您不需要从 dom 中删除图像并插入另一个图像 - 您只需更改已经存在的图像的 src。 为此，您应该在 onclick 函数中使用“this”变量（指向 col 中的图像）并更改其“src”。

即。

img.onclick = function() {
    // wrong:
    //var image1= new Image();
    //image1.src="../www/images/TEST2.png";
    //img=image1;  

    // right:    
    this.src = '../www/images/TEST2.png';
};