尝试使用javascript创建座位预订系统，并使用本地存储空间为学校项目保存数据。
这就是我现在所拥有的。我有2个不同的img（座位）椅子2dim阵列一个女巫是1级椅子2级2椅子3级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";
}
答案 0 :(得分：0)
我明白了！
这是本地存储的解决方案！我不知道你可以将变量作为本地存储的关键。
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>