Question

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

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);

Answer 1

我修改了你的代码，添加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";
        };
    }

阻止div在每次点击时添加

1 个答案: