javascript - 从数组中选择仅显示一次的图像

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 不会产生错误，但按 id 查找会给您带来意想不到的结果。

• 注意 JavaScript 范围差异和闭包。一旦你学会了它，就会发现它非常统一:JavaScript 变量作用域始终在函数级别。

一些提示:

• 学习一点 jQuery，会对你的 DOM 操作有很大帮助。

• 避免使用 new Array()，使用数组文字更短且更具可读性。

• 查看 ECMAScript forEach、map 和 filter。它们将帮助您以函数式风格编写 JavaScript，根据我的口味，这种风格更易于阅读(它们在旧版本的 Explorer 中不可用，但您可以使用填充程序或 Underscore.js)。