首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >帮助解决未解决的javascript问题

帮助解决未解决的javascript问题
EN

Stack Overflow用户
提问于 2014-03-13 05:36:05
回答 2查看 103关注 0票数 0

这是我之前遇到的一个问题的后续,现在还在继续。我在这里发布了一个问题:Updating an array on button click Javascript已经有了,但我仍然找不到解决方案。也许我没有完全解释清楚。

基本上,我的目标是在用户单击链接时从数组中删除一个元素。我的程序目前所做的就是将它从数组中删除(我可以从我用来测试的警报中看出)和屏幕。然而,当我再次从头开始添加一个元素时,它似乎重新添加/保留了刚刚删除的值。

代码语言: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();

我真的不能让它工作。我找不到问题&我希望/感谢任何帮助,因为在这个阶段它真的让我很恼火。>(

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

如果不清楚问题是什么,我将回答您关于代码的任何问题。

原创Q:Updating an array on button click Javascript

EN

回答 2

Stack Overflow用户

发布于 2014-03-13 08:13:55

您的问题是您没有使用单个数组。单击保存可将元素添加到全局theImages数组中,但不会将theImages传递给drawImages。单击a.close将从“theImages”数组中移除元素,但不会更改数组。因此,当您单击保存时,theImages会添加到,但不会从中删除。你可能应该寻求一种解决方案,你不需要将数组转换成字符串然后再转换回来,但是为了让你的代码工作得最少,我认为简单地将' array‘赋值给theImages就可以做到这一点:

代码语言:javascript
复制
function drawImages(array){

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

Stack Overflow用户

发布于 2014-03-13 06:02:41

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

这一行下面的代码:

代码语言:javascript
复制
alert("You clicked to close image "+(imageNum+1));

测试一下:

代码语言:javascript
复制
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()可能会删除正在删除的当前映像,但“恢复”之前删除的任何其他映像。

如果要将x传递给函数(图像索引),执行var imageNum = this.nameIndex;有什么用呢?不妨只使用xalert("You clicked to close image "+(x+1));

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/22364370

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档