傳遞圖像數組值和更改圖像源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變量。這是一個非常令人誤解的名字，因爲它實際上只代表一個圖像。

希望有幫助！