更新按钮上的数组单击Javascript [英] Updating an array on button click Javascript

问题描述

这个问题可能有点长，但是和我在一起。

This question may be a bit long winded but bear with me.

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

I am trying to update and array every time a user hits the save button.

这些DataURI值保存在数组中。

These DataURI values are kept in an array.

保存值后，将创建排序缩略图并将其添加到屏幕底部。

Once the value is saved a thumbnail of sorts is created and added at the bottom of the screen.

点击这些图像上的X图标调用一个函数删除正确的图像

Clicking the X icon on those images calls a function to remove the correct image from the array.

然后使用更新数组值重绘图像，从
屏幕中删除它们。

The images should then be redrawn with the update array values, thus removing it from the screen.

我已添加图片以尝试并演示：

I have included images to try and demonstrate:

图片＃1（在下面点击并添加图片时）：

Image #1 (when save is clicked and image added below):

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

图片＃2（关闭屏幕上的图片后，添加新图片会同时添加新图片和新图片）：

Image #2 (after closing the on screen images, adding a new image adds the deleted ones again along with the new one):

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

这是一个问题，它会重新添加删除的值。

That is the issue, that it re-adds the deleted values.

我将发布代码如下：

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();

我已经尝试解决这个问题，但没有运气..

I've been trying to solve this for hours but no luck..

推荐答案

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

After removing the image from the array you are not storing it anywhere so the splice result is lost and the array remains the same

    array.splice(x,1);

需要

    array =  array.splice(x,1);

这篇关于更新按钮上的数组单击Javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！