试图用javascript创建座位预约系统并用本地存储保存数据

Question

试图用JavaScript创建座位预订系统并将数据与本地存储保存为学校项目。

这就是我现在拥有的。我有4个不同的img（座位）椅子2dim阵列一个女巫是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"; 
} 

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>