尝试使用 javascript 制作座位预订系统并使用本地存储保存数据答案

【问题标题】：Trying to make a seat reservation system with javascript and save data with local storage尝试使用 javascript 制作座位预订系统并使用本地存储保存数据
【发布时间】：2014-11-28 00:14:53
【问题描述】：

尝试使用 javascript 制作座位预订系统，并将数据保存到学校项目的本地存储中。

这就是我现在所拥有的。我有 2dim 阵列，有 4 个不同的 img（座位）椅子 1 个女巫是 1 类椅子 2 类 2 椅子 3 类 3 和 chair0 女巫没有椅子.....但我不知道如何预订座位..当我点击它变成绿色，但我希望当我再次单击以返回之前的 img 时。并且想如果我保留一个座位，当我刷新页面以更改 img 源（变成灰色）意味着它已经被占用了

var currentDiv = document.getElementById("div1");

var zaal = [     [0, 0, 3, 3, 3, 3, 3, 3, 3, 3, 0, 0],
                 [0, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 0],
                 [0, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 0],
                 [3, 3, 3, 3, 3, 2, 2, 3, 3, 3, 3, 3],
                 [3, 3, 3, 3, 2, 2, 2, 2, 3, 3, 3, 3],
                 [3, 3, 3, 2, 2, 1, 1, 2, 2, 3, 3, 3],
                 [3, 3, 3, 2, 2, 1, 1, 2, 2, 3, 3, 3],
                 [3, 3, 3, 2, 2, 1, 1, 2, 2, 3, 3, 3],
                 [3, 3, 3, 2, 2, 1, 1, 2, 2, 3, 3, 3],
                 [3, 3, 3, 3, 2, 2, 2, 2, 3, 3, 3, 3],
                 [3, 3, 3, 3, 3, 2, 2, 3, 3, 3, 3, 3],
                 [0, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 0],
                 [0, 0, 3, 3, 3, 3, 3, 3, 3, 3, 0, 0],
                 [0, 0, 3, 3, 3, 3, 3, 3, 3, 3, 0, 0] ];



for (i = 0; i < zaal.length; i++) {
    var newLine = document.createElement("br");
    currentDiv.appendChild(newLine);
            for (j = 0; j < zaal[i].length; j++) { 
                var newImg = document.createElement("img");
                currentDiv.appendChild(newImg); 
                newImg.style.width = "8%";
                newImg.className = "stoelen";
                newImg.id = "rij_" + i + "_plaats_" + j;
                newImg.onclick = function() {myFunction(this)};

                if (zaal[i][j] === 3 ) {
                newImg.src = "pictures/reservering/chairs3.png"; 


                }
                else if (zaal[i][j] === 2 ) {
                newImg.src = "pictures/reservering/chairs.png"; 

                }
                else if (zaal[i][j] === 1 ) {
                newImg.src = "pictures/reservering/chairs5.png";     

                }
                else{
                newImg.src = "pictures/reservering/chairs7.png";   

                }
            }
}


function myFunction(x){
    x.src = "pictures/reservering/chairs4.png";
}

【问题讨论】：

一个简单的解决方案是在每个图像上创建一个属性以保存其旧状态。在更改图像 src 之前在 myFunction 中添加 x.setAttribute('oldImage',x.src);然后修改函数以在第二次单击时交换它（我不给你更多代码）
Thnx @ThanasisGrammatopoulos ！这有很大帮助，现在可以了！直到现在，我才坚持保存所有点击椅子的数据。本地存储只保存一个键和一个值...但我想保存多个键，值是为每把椅子生成的 id
再次没有用于学习的代码，而是搜索 JSON.stringify() 和 JSON.parse()

标签： javascript html dom local-storage

【解决方案1】：

我明白了！！

这是本地存储的解决方案！我不知道您可以将变量作为本地存储中的键。

 var stoel;
    var gereserveerd = localStorage.getItem(stoel);
    var stoelPrijs = 0;
    var currentDiv = document.getElementById("div1");

    var zaal = [     [0, 0, 3, 3, 3, 3, 3, 3, 3, 3, 0, 0],
                     [0, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 0],
                     [0, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 0],
                     [3, 3, 3, 3, 3, 2, 2, 3, 3, 3, 3, 3],
                     [3, 3, 3, 3, 2, 2, 2, 2, 3, 3, 3, 3],
                     [3, 3, 3, 2, 2, 1, 1, 2, 2, 3, 3, 3],
                     [3, 3, 3, 2, 2, 1, 1, 2, 2, 3, 3, 3],
                     [3, 3, 3, 2, 2, 1, 1, 2, 2, 3, 3, 3],
                     [3, 3, 3, 2, 2, 1, 1, 2, 2, 3, 3, 3],
                     [3, 3, 3, 3, 2, 2, 2, 2, 3, 3, 3, 3],
                     [3, 3, 3, 3, 3, 2, 2, 3, 3, 3, 3, 3],
                     [0, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 0],
                     [0, 0, 3, 3, 3, 3, 3, 3, 3, 3, 0, 0],
                     [0, 0, 3, 3, 3, 3, 3, 3, 3, 3, 0, 0] ];



 function maakStoelen () {   
    for (i = 0; i < zaal.length; i++) {
        var newLine = document.createElement("br");
        currentDiv.appendChild(newLine);
                for (j = 0; j < zaal[i].length; j++) { 
                    var newImg = document.createElement("img");
                    currentDiv.appendChild(newImg); 
                    newImg.id = "rij_" + (i+1) + "_plaats_" + j;
                    newImg.onclick = function() {reserveerStoel(this)};

                    if (isGereserveerd(newImg)) {
                        newImg.setAttribute("src", "pictures/reservering/chairs6.png");
                        //newImg.src = "pictures/reservering/chairs6.png"
                        newImg.className = "stoel4"; 
                    }

                    else if (zaal[i][j] == 3 ) {
                        newImg.src = "pictures/reservering/chairs3.png"; 
                        newImg.className = "stoel3";    

                    }
                    else if (zaal[i][j] ==  2 ) {
                        newImg.src = "pictures/reservering/chairs.png"; 
                        newImg.className = "stoel2";
                    }
                    else if (zaal[i][j] == 1 ) {
                        newImg.src = "pictures/reservering/chairs5.png"; 
                        newImg.className = "stoel1";    

                    }
                    else {
                        newImg.src = "pictures/reservering/chairs7.png";
                        newImg.className = "stoel0";    

                    }
                }
    }
 }
    maakStoelen();


    function isGereserveerd(newImg) {
        var gevonden = false;
        var k = 0;

        while( !gevonden && (k < localStorage.length)) {
            if (newImg.id == localStorage.key(k)) {

                gevonden = true;
            }
            k++;
        }
        return gevonden;

    }



    function reserveerStoel(x){
    stoel = x.id;
    if (x.getAttribute("src") == 'pictures/reservering/chairs4.png') {
        localStorage.removeItem(stoel);
        if (x.className == "stoel3"){
            x.setAttribute("src", 'pictures/reservering/chairs3.png');
            stoelPrijs -= 10;
        }
        else if (x.className == "stoel2"){
            x.setAttribute("src", 'pictures/reservering/chairs.png');
             stoelPrijs -= 15;


        }
        else if (x.className == "stoel1"){
            x.setAttribute("src", 'pictures/reservering/chairs5.png');
             stoelPrijs -= 20;


        }
    } 
    else if (x.getAttribute("src") == 'pictures/reservering/chairs7.png'){
        alert("kan niet reserveren");
    }
    else {
        localStorage.setItem(stoel, x.id);
        x.setAttribute("src", 'pictures/reservering/chairs4.png');
        if (x.className == "stoel3"){
            stoelPrijs += 10;



        }
        else if (x.className == "stoel2"){
            stoelPrijs += 15;


        }
        else if (x.className == "stoel1"){
            stoelPrijs += 20;


        }

    }
        alert(x.id);
        document.getElementById("totaalPrijsText").innerHTML = stoelPrijs;

}  





</script>

【讨论】：