0

我有一个带有背景图像的表格，单击该表格时，会显示其他图像供用户选择。这是有效的，并在点击事件上出现或隐藏。但是，当用户单击以添加第二张图像时，图像菜单会再次出现（应该如此）但两次。我已经注释掉了我尝试过的解决方案。我以为第一次点击我可以显示my_div然后删除它allImages.onclick。这在 Chrome 中引发了一个 null 错误，这可能是可以理解的。这里的问题是类似的。希望我正确添加了链接。无论如何，建议或帮助表示赞赏。 

function addImage(col) {
    var img = new Image();
    img.src = "../www/images/TEST.png";
    col.appendChild(img);
    img.onclick = function () {
        var myImages = new Array();
        myImages[0] = "../www/images/TEST3.png";
        myImages[1] = "../www/images/TEST2.png";
        myImages[2] = "../www/images/TEST4.png";

        for (var i = 0; i < myImages.length; i++) {
            var allImages = new Image();
            allImages.src = myImages[i];

            var newList = document.createElement("ul");
            newList.appendChild(allImages);
            my_div = document.getElementById("showPics");
            my_div.appendChild(newList);
            my_div.style.display = 'block';

            allImages.onclick = function (e) {
                img.src = e.target.src;
                my_div.style.display = 'none';
                //var element = document.getElementById("showPics");
                //element.parentNode.removeChild(element);
            };
        }
    };
};
for (r = 0; r < howOften; r++) {
    row = table.insertRow(-1);
    for (c = 0; c < numDays; c++) {
        col = row.insertCell(-1);
        addImage(col);
    }
}
document.getElementById('holdTable').appendChild(table);
4

1 回答 1

0

我修改了您的代码，添加了 ul 来保存所有 img。它有效，但可能会更好。

   function addImage(col) {

        var img = new Image();
        img.src = "../www/images/TEST.png";
        col.appendChild(img);

        var myImages = new Array();
        myImages[0] = "../www/images/TEST1.png";
        myImages[1] = "../www/images/TEST2.png";
        myImages[2] = "../www/images/TEST3.png";

        var container = document.createElement("ul");  //ul to simplify hide/show
        container.style.display = "none";

        for (var i = 0; i < myImages.length; i++) {

            var newList = document.createElement("li");
            var im = document.createElement("img");
            im.src = myImages[i];
            newList.appendChild(im);

            im.onclick = function () {
                img.src = this.src;
            };
            container.appendChild(newList);
        }

        col.appendChild(container);

        col.onclick = function () {
            if (container.style.display == "none")
                container.style.display = "block";
            else
                container.style.display = "none";
        };
    }
于 2013-01-07T03:23:29.503 回答