传递图像数组值和更改图像源onclick

Question

好的，所以最后，在我在这里的点击问题上点击下降（大声！）。该代码现在向用户显示每个节点点击一次的图片选择。唷。

但是，现在我的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 s的的idshowPics追加到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引用现在你是圈外，这恰好是在myImages最后一个图像相同Image对象。因此，只有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; 
    } 
    ... 
} 

这就是它的全部！ Example。

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

Answer 2

你addImage()功能使得直接引用allImages变量。一个问题是，因为您在代码中早些时候在for循环中使用（并重用）了该变量，所以它只会保留分配给它的最后一个值。因此，无论您拨打多少次addImage()，它总是会将onclick函数添加到allImages指向的最后一幅图像。

我也建议重命名allImages变量。这是一个非常令人误解的名字，因为它实际上只代表一个图像。

希望有帮助！