Question

我正在尝试向用户展示图片，他们可以选择一个并添加到表格中。这很好，但是当我尝试将另一个图像添加到另一个表节点时，将再次生成完整列表。基本上，我想要一个图像选择器。据我所知img.onclick每次调用点击时都会构建图像列表，但我无法理解它。我试过了

var element = document.getElementById("menu");
element.parentNode.removeChild(element);

每次调用事件时尝试删除附加div的方法，但它对我不起作用。一直试图解决这个问题所以所有的帮助都非常感激。

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 my_div = document.createElement("div");
            my_div.id = "showPics";
            document.body.appendChild(my_div);
            newList = document.createElement("ul");
            newList.appendChild(allImages);
            my_div.appendChild(newList);
            my_div.style.display = 'block';

            allImages.onclick = function (e) {
                img.src = e.target.src;
                my_div.style.display = 'none';
            };
        }
    };
}
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

我已经创建了代码的更新版本，这里：http://jsfiddle.net/NyxCu/15/可能会执行您想要执行的操作。

您需要学习JavaScript样式的详细信息。但我们先来回顾一下这些问题：

在这些方面：

        var my_div = document.createElement("div");
        my_div.id = "showPics";
        document.body.appendChild(my_div);

您正在多次创建具有相同ID的div。但是ID应该在您的文档中是唯一的。浏览器不会抱怨它，但是如果你稍后进行getElementById，你会得到一个不需要的div。

在您发送的jsfiddle链接（http://jsfiddle.net/Inkers/NyxCu/）中，代码稍后会执行getElementById：

            my_div = document.getElementById("showPics");
            my_div.appendChild(newList);

这意味着对于第一张图像上的每次点击，第二张图像总是添加到相同的div（这就是为什么图像一遍又一遍地重复）。

可能你做了那个黑客，因为在循环上设置了onclick事件处理程序：

        allImages.onclick = function (e) {
            img.src = e.target.src;
            my_div.style.display = 'none';
        };

没有按预期工作。问题是 JavaScript变量范围仅适用于功能级别。

这意味着：

    for (var i = 0; i < length; i++) {
         var item = create(i);
     }

相当于：

    var i, item;
    for (i = 0; i < length; i++) {
         item = create(i);
    }

这很重要。因为当您创建事件处理程序时，如下所示：

    var i, item;
    for (i = 0; i < length; i++) {
         item = create(i);
         something.onclick = function () {
               use(item);
         }
    }

item不是您所期望的。分配给onclick的函数是一个闭包，它具有对父环境的引用：父函数不是for循环的范围。这意味着item将始终等于create(length - 1);。

这就是为什么在代码中你得到了意外的my_div。

代码中的另一个问题（我在链接的重写代码中没有改变）是第二个图像列表一遍又一遍地生成（检查HTML以查看）。

总结：

元素的元素应该是唯一的。重复的ID不会产生错误，但按ID查找会给您带来意想不到的结果。
请注意JavaScript范围差异和闭包。一旦你学会了它，就会非常统一：JavaScript变量范围总是处于功能级别。

一些提示：

学习一点jQuery，对DOM操作有很大的帮助。
避免new Array()，使用数组文字更短，更易读。
查看ECMAScript forEach，map和filter。它们将帮助您编写功能样式的JavaScript，这样我觉得它更容易阅读（它们在旧版本的资源管理器中不可用，但您可以使用垫片或Underscore.js）。

从阵列中选择仅显示一次的图像

1 个答案: