javascript - 更新按钮单击 Javascript 上的数组

Question

这个问题可能有点啰嗦，但请耐心听我说。

每次用户点击保存按钮时，我都会尝试更新和排列。

当他们单击“保存”时，就会在页面上创建 Canvas 图像。

这些 DataURI 值保存在一个数组中。

保存值后，就会创建某种缩略图并将其添加到屏幕底部。

单击这些图像上的 X 图标会调用一个函数，从数组中删除正确的图像。

然后应该使用更新数组值重新绘制图像，从而将其从屏幕。

我已经添加了图像来尝试演示:

图像 #1(单击“保存”并在下面添加图像时):

http://postimg.org/image/cybazwydf/

图像#2(关闭屏幕上的图像后，添加新图像会再次添加已删除的图像和新图像):

http://postimg.org/image/gi5pcornl/

这就是问题所在，它重新添加了已删除的值。

我将在下面发布它的代码:

function getDataUrl () {
var a = document.getElementById("theCanvas");
var context = a.getContext("2d");
var dataURL = a.toDataURL();
save(dataURL);
}


var theImages = new Array();




//Add dataURL to array:
function save(URL) {
    theImages.push(URL);
    var x = JSON.stringify(theImages);
    localStorage.setItem('images', x);


drawImages(x);
}

function drawImages(array){

    var array = localStorage.getItem("images");
    array = JSON.parse(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);
    }


    for (var x=0; x < array.length; x++){ 
                    //Create image for each value in array:



                    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";


                    document.getElementById("saveArea").appendChild(divimg);

                    var img = document.createElement("img");
                    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 = "#";

                    link.appendChild(close);

                    link.nameIndex = x;

                    //WHEN THE USER CLICKS THE CLOSE ICON:
                    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');
                        array = JSON.stringify(array);

                        localStorage.setItem('images', array);
                        drawImages(array);
                    } );




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

    } //End Loop

} //End drawImages();

我已经尝试解决这个问题几个小时了，但没有成功..

Answer 1

从数组中删除图像后，您不会将其存储在任何地方，因此拼接结果会丢失并且数组保持不变

    array.splice(x,1);

需要

    array =  array.splice(x,1);