使用陣列onclick中的圖像更改節點圖像

Question

我正在顯示陣列中的圖像。我希望用戶能夠從數組中選擇一個圖像並替換表中的當前圖像img.src。當單擊一個單元格時，我已經設法向用戶顯示圖像選擇，但不確定從這裏開始的位置。我已經嘗試了數組圖像上的clickhandler，但警報僅在單擊數組中最後一個圖像時顯示。困惑。所有幫助讚賞。

function addImage (col) { 
var img = new Image(); // Note that a new img variable will be declared each time this function is called 
img.src = "../www/images/TEST.png"; 
col.appendChild(img); 
img.onclick = function() { 
    var myImages = new Array(); 
    myImages[0] = "../www/images/TEST3.png"; 
    myImages[1] = "../www/images/TEST2.png"; 
    myImages[2] = "../www/images/TEST4.png"; 

    for (var i = 0; i < myImages.length; i++) { 
     var allImages = new Image(); 
     allImages.src=myImages[i]; 


     var newList = document.createElement("ul"); 
     var newContent = allImages; 
     newList.appendChild(newContent); 
     my_div = document.getElementById("showPics"); 
     document.body.insertBefore(newList, my_div); 
     }; 

     allImages.onclick = function(){ 

     alert("the click is working");//it is but only for the last image...grrrrr 
     }; 
     //this.src = ????; 
     }; 
     }; 

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

Answer 1

對於初學者，您需要將您的點擊分配你的循環中：

function addImage(col) { 
    var img = new Image(); // Note that a new img variable will be declared each time this function is called 
    img.src = "../www/images/TEST.png"; 
    col.appendChild(img); 
    img.onclick = function() { 
     var myImages = new Array(); 
     myImages[0] = "../www/images/TEST3.png"; 
     myImages[1] = "../www/images/TEST2.png"; 
     myImages[2] = "../www/images/TEST4.png"; 

     for (var i = 0; i < myImages.length; i++) { 
      var allImages = new Image(); 
      allImages.src = myImages[i]; 


      var newList = document.createElement("ul"); 
      var newContent = allImages; 
      newList.appendChild(newContent); 
      my_div = document.getElementById("showPics"); 
      document.body.insertBefore(newList, my_div); 
      allImages.onclick = function(e) { 
       img.src = e.target.src; 
      }; 

     }; 

     //this.src = ????; 
    }; 
}; 

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

...但你必須將每一個圖像被點擊時重新分配你的點擊處理程序的代碼，以及重新創建您的DOM（HTML）元素。您可能需要考慮在後續點擊中隱藏/顯示my_div。