Question

好的，所以最后一分钱掉了（响亮的笨拙！）我点击这里的点击问题Append dynamic div just once and a JSFiddle issue。代码现在向用户显示每个节点点击一次的图片选择。唷。

但是，现在我的img.src=e.target.src行无法访问阵列中的其他图片。只有数组中的最后一个图像才会添加到表中。我想这是因为allImages.onclick事件应该在循环中？

我已尝试过，然后img显示为未定义。我猜这是因为循环（因此函数）在声明var img之前运行？我认为这是事情顺序的问题。

所有帮助表示赞赏。

var makeChart = function () {
    var table = document.createElement('table'),
    taskName = document.getElementById('taskname').value,
    header = document.createElement('th'),
    numDays = document.getElementById('days').value, //columns
    howOften = document.getElementById('times').value, //rows
    row,
    r,
    col,
    c;

    var myImages = new Array();
    myImages[0] = "http://www.olsug.org/wiki/images/9/95/Tux-small.png";
    myImages[1] = "http://a2.twimg.com/profile_images/1139237954/just-logo_normal.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);
        var newList = document.createElement("ul");
        newList.appendChild(allImages);
        my_div = document.getElementById("showPics");
        my_div.appendChild(newList);
        my_div.style.display = 'none';
    }
    header.innerHTML = taskName;
    table.appendChild(header);

    header.innerHTML = taskName;
    table.appendChild(header);

    function addImage(col) {
        var img = new Image();
        img.src = "http://cdn.sstatic.net/stackoverflow/img/tag-adobe.png";
        col.appendChild(img);
        img.onclick = function () {
            my_div.style.display = 'block';

            allImages.onclick = function (e) { // I THINK THIS IS THE PROBLEM
                img.src = e.target.src;
                my_div.style.display = 'none';
                img.onclick=null;
            };
        }

    }

    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);
    document.getElementById('createChart').onclick=null;
}

Answer 1

您的addImage()函数直接引用allImages变量。一个问题是，由于您在代码中较早的for循环中使用（并重用）该变量，因此它只保留分配给它的最后一个值。因此，无论您拨打addImage()多少次，都始终将onclick函数添加到allImages指向的最后一个图像。

我还建议重命名allImages变量。这是一个非常具有误导性的名称，因为它实际上只代表一个单一的图像。

希望有所帮助！

Answer 2

嗯，问题似乎源于不同的部分。首先，

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);
    var newList = document.createElement("ul");
    newList.appendChild(allImages);
    my_div = document.getElementById("showPics");
    my_div.appendChild(newList);
    my_div.style.display = 'none';
}

此循环为div中的每个图像创建一个新的myImages，然后将ul附加到该div，最后将Image附加到ul当前图片为document.getElementById('showPics')。

div返回的问题，因为id showPics与body附加myImages.length div一样多ul ，有一个神秘的魔法答案，永远不应该再说出来，甚至想过。

为什么不做明智的事情并在循环外创造一个单一的快乐li？在循环外部附加一个var my_div = document.createElement('div'); my_div.id = 'showPics'; var newList = document.createElement('ul'); my_div.appendChild(newList); for var i = 0; i < myImages.length; i++) { ... var li = document.createElement('li'); li.appendChild(allImages); newList.appendChild(li); ... } my_div.style.display = 'none';子元素。然后继续在循环中追加尽可能多的my_div。

div

现在，click是唯一包含图片的function addImage(col) { var img = new Image(); img.src = "http://cdn.sstatic.net/stackoverflow/img/tag-adobe.png"; col.appendChild(img); img.onclick = function () { my_div.style.display = 'block'; allImages.onclick = function (e) { // I THINK THIS IS THE PROBLEM img.src = e.target.src; my_div.style.display = 'none'; img.onclick=null; }; } }。因此，allImages事件处理程序可以安全地切换其可见性。

其次，

Image

myImages引用相同的myImages对象，因为您已经不在循环中，这恰好是click中的最后一个图像。因此，只有var sel = null; //This comes before my_div中的最后一个图像才会将处理程序注册到click事件。为了解决这个问题，我们制作了一个新变量。

allImages

现在，我们将myImages处理程序添加到<{1}} 内部循环中，以便for var i = 0; i < myImages.length; i++) { var allImages = new Image(); allImages.src = myImages[i]; allImages.onclick = function (e) { if(sel !== null) { sel.src = e.target.src; my_div.style.display = 'none'; sel.onclick=null; sel = null; } }; ... }中的每个图像都获得一块馅饼，正如他们所说的那样

addImage

最后，调整sel，以便在点击图片时设置function addImage(col) { ... img.onclick = function () { my_div.style.display = 'block'; sel = img; } ... }。

sel.onclick = null

这就是它的全部！的 Example

请注意，如果您注释掉{{1}}，则可以根据需要多次更改特定单元格的图像。

传递图像数组值并更改图像源

2 个答案: