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

Question

尝试使用 JavaScript 制作座位预订系统，并为学校项目使用本地存储保存数据。

这就是我现在所拥有的。我有 2dim 数组，有 4 个不同的 img(座位)椅子，一个女巫是 1 类椅子，2 类 2 椅子，3 类椅子，0 号女巫没有椅子.....但我不知道如何预订座位..当我点击时它在上面变成绿色，但我希望当我再次单击时返回到之前的 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";
}

Answer 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>