0

最终，我希望用户能够单击节点，显示选择的图像并用他们的选择填充节点。但是，现在，我只是想测试如何在创建表时使用不同的图像 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);
};
4

1 回答 1

0

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

在 onclick 函数中，当您将 img 更改为“指向”image1 时，它不会更改附加到 col 的图像。

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

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

IE。

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

    // right:    
    this.src = '../www/images/TEST2.png';
};
于 2012-12-30T14:30:59.640 回答