尝试使用 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";
}
最佳答案
我明白了!!
这是本地存储的解决方案!我不知道你可以将变量作为本地存储中的键。
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>
关于javascript - 尝试用javascript制作座位预订系统并使用本地存储保存数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26170448/