Question

这个问题可能有点长，但请耐心等待。

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

当他们点击保存时，会在页面上创建一个画布图像。

这些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);

在按钮上更新数组单击Javascript

1 个答案: