javascript - 传递图像数组值并更改图像源 onclick

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

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

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';
}

此循环为 myImages 中的每个图像创建一个新的 div，然后将 ul 附加到该 div ，最后将当前图像的 Image 附加到 ul 中。

document.getElementById('showPics') 返回的问题，因为有尽可能多的 div 具有 id showPics 作为 myImages.length 附加到 body 上，有一个神秘的神奇答案，永远不应该再被提及，甚至不应该被想到。

为什么不做明智的事情并在循环外创建一个单一的快乐 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 中的每个图像都获得正如他们所说，一 block 馅饼。

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;
    }
    ...
}

这就是全部内容了! <强> Example 。

请注意，如果您注释掉 sel.onclick = null，您可以根据需要多次更改特定单元格的图像。