Javascript 显示数组中的图像，让用户选择一个并在节点中更改图像

好的，我试着让用户看到一个图像选择，然后单击一个来更改表中的图像。当前的方式只是添加阵列的最后一个图像。我知道这是为什么（我想！），但我很难找到解决办法。见评论。一如既往，我们感谢所有的帮助

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

for（r=0；r

好吧，对你来说

您正在使用img=new Image（）； 将值赋给变量而不声明它“在函数中使用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);
    };
};

函数添加图像（col）{
var img=new Image（）；//请注意，每次调用此函数时都会声明一个新的img变量
img.src=“../www/images/TEST.png”；
儿童上校（img）；
img.onclick=函数（）{
var myImages=新数组（）；
myImages[0]=“www/images/TEST3.png”；
myImages[1]=“www/images/TEST4.png”；
myImages[1]=“www/images/TEST2.png”；
对于（var i=0；i

---

希望它现在可以正常工作。

需要循环图像数组，并为每个数组创建（并附加）一个新图像。单击handler将更改主映像

src

Hi charlietfl，我循环遍历数组并按建议追加。用户现在可以看到图像，但无法单击添加。请参见上面编辑的代码。（最新版本）。感谢您的帮助。需要将

allImages.onclik

移动到其上方的

for

循环中，以便在创建每个图像时获得clcik处理程序。。。因为它是在循环之后，所以只有最后一个图像得到它。。。。可能会考虑使用jQuery用于代码…可以用大约4-6行代码编写完整的代码，并且对readHi js更简单，谢谢您的回复。我已经落实了你的建议。然而，我仍然有一些麻烦。我已经成功地将图像显示给用户，但是onclick只处理最后一张图像。我也有点不确定如何将其传递给this.src/img.src.Oh。。。我没有明确提到变量的作用域是函数而不是块（就像这里的for循环）。。。这里，

var allImages=new Image（）

inside for loop不会每次都创建一个新变量，它会重用（并覆盖）相同的

allImages

。。。在C++语言中，在<代码> {}} /代码>块中的变量不能在代码“{ } < /Cord>块外”访问，即使在相同的函数中，在JavaScript中，即使在“代码> {{} /Cuth.Bug”内声明的变量在整个函数中都是可访问的…你可以用我将一段代码拆分成一个新函数的方法来解决它。我建议你使用变量作用域和匿名函数（立即调用）。。。对于刚接触JS的人来说，变量作用域是最容易混淆但功能最强大的特性之一。