Question

最亲爱的人，

对于一个项目，我们必须为荷兰的剧院制作预订系统。我们的想法是，我们根据剧院座位图制作预订系统价格根据座位和行而有所不同，用JavaScript制作。我们实际制作了地图并将数组作为可点击元素。现在我们发现了一些问题。 1.座位等级0，实际上不是一类或不可点击。我们用它来填充地图，但实际上并不知道如何将它从脚本中删除但在CSS文件中使其透明。 2.我们需要某种表格来显示所选择的座位，如果你点击多个座位则会计算它。我们非常困难，非常感谢一些帮助。亲切的问候，

Wessel Olde Olthof

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

Answer 1

我把一个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);
});

预订系统障碍

1 个答案: