1

我正在尝试向用户展示图片，他们可以选择一张并将其添加到表格中。这很好，但是当我尝试将不同的图像添加到另一个表节点时，会再次生成完整列表。基本上，我想要一个图像选择器。我知道每次点击时 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);
4

1 回答 1

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 中（这就是为什么图片会一遍又一遍地复制）。

可能你做了那个hack，因为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 应该是唯一的。重复的 ids 不会产生错误，但 find by id 会给你带来意想不到的结果。

  • 请注意 JavaScript 范围的差异和闭包。一旦你学会它，就很统一了：JavaScript 的变量作用域总是在函数级别。

一些技巧：

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

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

  • 看看ECMAScriptforEach和. 它们将帮助您编写具有我喜欢的更易于阅读的函数式风格的 JavaScript（它们在旧版本的 Explorer 中不可用，但您可以使用 shim 或 Underscore.js）。mapfilter

于 2013-01-12T17:58:42.393 回答