0

好的，所以最后一分钱掉了（大声的沉闷！）我在这里遇到的点击问题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;
}
4

2 回答 2

1

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

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

希望有帮助！

于 2013-01-05T15:04:20.517 回答
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';
}

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

什么document.getElementById('showPics')返回的问题，因为附加到asdiv的 s一样多，所以有一个神秘的神奇答案，永远不应该说，甚至想，再次。id showPicsbodymyImages.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可以分到一块。

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，您可以随意更改特定单元格的图像。

于 2013-01-05T15:10:48.137 回答