使用阵列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。