显示来自阵列的图像，让用户选择一个并更改节点中的图像

Question

好吧，所以，我试图让用户看到图像的选择，然后单击一个图像来更改表格中的图像。它目前的方式只是添加数组的最后一个图像。我知道这是为什么（我想！），但努力寻找解决方案。看评论。一如既往，所有帮助表示赞赏。

for (r = 0; r < howOften; r++) { 
    row = table.insertRow(-1); 
    for (c = 0; c < numDays; c++) { 
     col = row.insertCell(-1); 
     img = new Image(); 
     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/TEST4.png"; 
      myImages[1] = "../www/images/TEST2.png"; 
      for (var i = 0; i < myImages.length; i++) { 
       var allImages = new Image(); 
       allImages.src = myImages[i]; //I want to display this array to user somehow 
       //and for them to be able to choose one and for this.src to point to that. 
       var gogetImages = allImages.src; 
       this.src = (gogetImages); //I know this is wrong 
      }; 
     }; 
    }; 
}; 

//LATEST VERSION STARTS FROM HERE 
     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

那么，在你的情况，你正在使用IMG =新的图像

（）; 将一个值赋给一个变量而不声明它“在一个函数内部使用var”会创建一个全局变量。

因此，在你的代码中，你正在创建一个全局的“img”变量，并将其重新分配给一个新的图像，这对你造成了问题。

我建议你把代码分解成如下的函数。

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/TEST4.png"; 
     myImages[1] = "../www/images/TEST2.png"; 
     for (var i = 0; i < myImages.length; i++) { 
      var allImages = new Image(); 
      allImages.src = myImages[i]; //I want to display this array to user somehow 
      //and for them to be able to choose one and for this.src to point to that. 
      var gogetImages = allImages.src; 
      this.src = (gogetImages); //I know this is wrong 
     }; 
    }; 
} 

for (r = 0; r < howOften; r++) { 
    row = table.insertRow(-1); 
    for (c = 0; c < numDays; c++) { 
     col = row.insertCell(-1); 
     addImage(col); 
    }; 
}; 

希望它现在适合你。