Question

这是我所遇到的一个问题，并且我还在继续。我在这里发了一个问题：Updating an array on button click Javascript已经但我仍然无法找到解决方案。也许我没有完全清楚地解释它。

基本上，我的目标是在用户点击链接时从数组中删除元素。我的程序当前所执行的操作是将其从数组中删除（我可以通过我用来测试的警报来判断）和屏幕。但是，当我再次从头开始添加元素时似乎重新添加/保留刚刚删除的值。

var theImages = new Array();

//When the user clicks save
//The image(dataURI) is added to an array.
//JSON.stringify function used to store the dataURIs in localStorage:
function save(URL) {
    theImages.push(URL);
    var x = JSON.stringify(theImages);
    localStorage.setItem('images', x);

//drawImages function called and the array is passed through in string form.    
drawImages(x);
}

function drawImages(array){

    //Convert the array back into array form:
    array = JSON.parse(array);
    //array = [];

    //If an image is saved, display the saveArea div:
    if (array.length > 0){
        document.getElementById("saveArea").style.visibility="visible";
    }

    //Clear the elements that might already be in the div so they don't appear twice:
    var theDiv = document.getElementById("saveArea");
    while (theDiv.firstChild) {
    theDiv.removeChild(theDiv.firstChild);
    }

    //Loop to display all images in the array:
    for (var x=0; x < array.length; x++){ 
    //alert(array.length);
                    //Create image for each value in array:


                    //Create a div to contain each image:
                    var divimg = document.createElement("div");

                    divimg.style.marginRight="10px";
                    //divimg.style.border = "1px dotted red";
                    divimg.className = "saveContainer";
                    divimg.style.width = 300+"px";
                    divimg.style.padding = 5+"px";
                    divimg.style.marginRight="10px";
                    divimg.style.height = 150+"px";
                    divimg.style.display="inline-block";    
                    divimg.style.marginRight="35px";



             //Add the container(s) to the surrounding main container:
             document.getElementById("saveArea").appendChild(divimg);


                                            //Create the image:
                    var img = document.createElement("img");

                                            //Set the source equal to point x in the 
                                            //Array of dataURIs
                                            img.src = array[x];
                    img.width = 300;
                    img.height = 150;
                    img.setAttribute("id", "theImageId");
                    img.style.marginRight="10px";
                    img.className = "saveImg";


                    //Add each image to the containing div:
                    divimg.appendChild(img);


                    //Create close button: 
                    var close = document.createElement("img");
                    close.src="close.png";
                    close.width = 50;
                    close.height = 50;
                    close.border = 0;
                    close.style.position="relative";
                    close.style.bottom=115+"px";
                    close.style.right=40+"px";
                    close.className="closeButton";
                    //close.style.cssFloat="right";
                    //close.style.right= 0+"px";


                    var link = document.createElement("a");
                    link.href = "#";

                                            //Make the close button image a link:
                    link.appendChild(close);

                    link.nameIndex = x;

                    //When the close button is clicked:
                    link.onclick = (function (x) {
                    var imageNum = this.nameIndex;
                    alert("You clicked to close image "+(imageNum+1));
                        //Remove the image:
                        array.splice(x,1);

                        alert("The length of this array is: "+array.length);
                        //Update localStorage:
                        localStorage.removeItem('images');

                                //Put array back in string form to store in local storage
                        array = JSON.stringify(array);

                        localStorage.setItem('images', array);
                           //Call the function again and pass it the updated array:
                        drawImages(array);
                    } );


                    //Add the close button the the containing div:
                    divimg.appendChild(link);
                    //divimg.appendChild(close);

    } //End Loop

} //End drawImages();

我真的无法让这个工作。我找不到问题＆amp;我希望/感谢任何帮助，因为在这个阶段我真的很讨厌。＆GT;（

我确实已经意识到这已经发布了，但觉得有必要进一步解释和评论。

如果不清楚问题是什么，我将回答您对该代码的任何问题。

原始问：Updating an array on button click Javascript

Answer 1

您的问题是您没有使用单个阵列。单击“保存”会将元素添加到全局的aImages数组中，但不会将图像传递给drawImages。单击a.close将删除＆＃39;数组中的元素。数组，但它不会改变图像。因此，当您单击“保存”时，会添加“图像”，但永远不会从中删除。你可能应该寻求一个解决方案，你不要将你的数组转换为字符串，然后再转回，但为了让你的代码工作量最少，我认为只需分配数组＆＃39;到图像会做到这一点：

function drawImages(array){

    //Convert the array back into array form:
    array = JSON.parse(array);
    theImages = array;
    /* ... */
}

Answer 2

尝试更改将信息再次保存到本地存储的方式。

此行下的代码：

alert("You clicked to close image "+(imageNum+1));

测试一下：

var imgArr = JSON.parse(localStorage.getItem('images'));
imgArr.splice(x, 1);

alert("The length of this array is: "+imgArr.length);

localStorage.removeItem('images');

localStorage.setItem('images', JSON.stringify(imgArr));

drawImages(imgArr);

请告诉我。

我假设通过使用array作为变量，它始终访问包含完整图像列表的现有变量。因此，splice()可能会删除当前正在删除的图片，但是＆＃34;恢复＆＃34;以前删除过的任何其他内容。

如果您将x传递给函数（图像索引），那么执行var imageNum = this.nameIndex;会有什么用处。不妨使用x：alert("You clicked to close image "+(x+1));。

协助解决未解决的JavaScript问题

2 个答案: