Question

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

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';
};

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

1 个答案: