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

希望它现在适合你。

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

1 个答案: