亲爱的人们，
对于一个项目，我们必须为荷兰的剧院制作一个预订系统。
我们的想法是，我们根据剧院座位图制作预订系统，
价格因使用JavaScript的座位和座位而异。实际上，我们制作了地图，并将数组作为可点击元素。现在我们发现了一些问题。 1.座位类别0，实际上不是一个类别或不应单击。我们用它来填充地图，但实际上不知道如何将其从脚本中删除，但使其在CSS文件中透明。 2.我们需要某种表格来显示选定的座位，如果您单击多个，则将其计数。我们被困住了，非常感谢您的帮助。
亲切的问候，
韦塞尔·奥尔德·奥尔索夫
<script>
var room1 = [
// 1 2 3 4 5 6 7 8 9 0 1 2
[0,0,1,1,1,1,1,1,1,1,0,0],//14
[0,1,1,1,1,1,1,1,1,1,1,0],//13
[0,1,1,1,1,1,1,1,1,1,1,0],//12
[1,1,1,1,1,2,2,1,1,1,1,1],//11
[1,1,1,1,2,2,2,2,1,1,1,1],//10
[1,1,1,2,2,3,3,2,2,1,1,1],//9
[1,1,1,2,2,3,3,2,2,1,1,1],//8
[1,1,1,2,2,3,3,2,2,1,1,1],//7
[1,1,1,2,2,3,3,2,2,1,1,1],//6
[1,1,1,1,2,2,2,2,1,1,1,1],//5
[0,1,1,1,1,2,2,1,1,1,1,0],//4
[0,1,1,1,1,1,1,1,1,1,1,0],//3
[0,0,1,1,1,1,1,1,1,1,0,0],//2
[0,0,1,1,1,1,1,1,1,1,0,0],//1
];
function make_seat()
{
for(var r = 0 ; r < room1.length ; r++)
{
var rowdiv = document.createElement("div");
rowdiv.setAttribute("id","DIV_" + r);
for(s = 0 ; s < room1[r].length ; s++)
{
var seat = document.createElement("button");
seat.setAttribute("id","seat_" + r + "_" + s);
seat.appendChild(document.createTextNode(""));
//seat.addEventListener("click",reservation,false);
seat.setAttribute("onclick","order("+r+","+s+")");
switch(room1[r][s])
{
case 0 : seat.setAttribute("class","seat_0"); break;
case 1 : seat.setAttribute("class","seat_1"); break;
case 2 : seat.setAttribute("class","seat_2"); break;
case 3 : seat.setAttribute("class","seat_3"); break;
}
rowdiv.appendChild(seat);
}
document.getElementById("DIV_inhoud").appendChild(rowdiv);
}
}
function order(r,s)
{
alert("row = " + (r + 1) + " seat = " + (s + 1));
}
function reservation(ev)
{
ev = ev || window.event;
var x = ev.target || ev.srcElement;
alert(x.id);
}
function start()
{
make_seat();
//document.getElementById("BTN_plus").addEventListener("click",optellen,false);
//document.getElementById("BTN_maal").addEventListener("click",vermenigvuldigen,false);
}
window.addEventListener("load",start,false);
</script>
</head>
<body>
<DIV id = DIV_inhoud></DIV>
最佳答案
我整理了一个jsfiddle，希望它能做您想要的。由于我使用的是jQuery，因此我选择仅在此处使用它，如果您刚刚开始，它可能值得一看，因为它使很多事情都变得更容易（或其他任何js库）。
http://jsfiddle.net/Moritz_M/kcu5ypka/16/
var room1 = [
// 1 2 3 4 5 6 7 8 9 0 1 2
[0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0], //14
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0], //13
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0], //12
[1, 1, 1, 1, 1, 2, 2, 1, 1, 1, 1, 1], //11
[1, 1, 1, 1, 2, 2, 2, 2, 1, 1, 1, 1], //10
[1, 1, 1, 2, 2, 3, 3, 2, 2, 1, 1, 1], //9
[1, 1, 1, 2, 2, 3, 3, 2, 2, 1, 1, 1], //8
[1, 1, 1, 2, 2, 3, 3, 2, 2, 1, 1, 1], //7
[1, 1, 1, 2, 2, 3, 3, 2, 2, 1, 1, 1], //6
[1, 1, 1, 1, 2, 2, 2, 2, 1, 1, 1, 1], //5
[0, 1, 1, 1, 1, 2, 2, 1, 1, 1, 1, 0], //4
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0], //3
[0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0], //2
[0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0], //1
];
function make_seat() {
for (var r = 0; r < room1.length; r++) {
var rowdiv = $("<div>");
rowdiv.attr("id", "DIV_" + r);
for (s = 0; s < room1[r].length; s++) {
var seat = $("<button id='seat_"+r+"_"+s+"'>");
seat.attr("id", "seat_" + r + "_" + s);
// seat.appendChild(document.createTextNode(""));
//seat.addEventListener("click",reservation,false);
seat.click(order);
switch (room1[r][s]) {
case 0:
seat.attr("class", "seat_0");
break;
case 1:
seat.attr("class", "seat_1");
break;
case 2:
seat.attr("class", "seat_2");
break;
case 3:
seat.attr("class", "seat_3");
break;
}
rowdiv.append(seat);
}
$("#DIV_inhoud").append(rowdiv);
}
}
function order() {
var seatInfo = $(this).attr("id").split("_");
var r = seatInfo[1];
var s = seatInfo[2];
$(this).toggleClass("selected");
$("#count_seat_1").html($(".seat_1.selected").size());
$("#count_seat_2").html($(".seat_2.selected").size());
$("#count_seat_3").html($(".seat_3.selected").size());
$("#count_total").html($(".selected").size());
}
function reservation(ev) {
ev = ev || window.event;
var x = ev.target || ev.srcElement;
alert(x.id);
}
$(document).ready( function() {
make_seat();
//document.getElementById("BTN_plus").addEventListener("click",optellen,false);
//document.getElementById("BTN_maal").addEventListener("click",vermenigvuldigen,false);
});
关于javascript - 预订系统的障碍，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26586669/