1

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

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

1 回答 1

0

那么，在你的情况下，

您正在使用 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);
    };
};

希望它现在对你有用。

于 2012-12-30T22:17:42.260 回答