預約系統障礙

最親愛的人溢出，預約系統障礙

對於一個項目，我們不得不爲荷蘭劇院預訂系統。我們的想法是，我們根據劇院座位地圖制定預訂系統，其中價格因座位和排位而異，採用JavaScript製作。我們實際上製作了地圖，並將數組作爲可點擊元素。現在我們發現了一些問題。 1.座位類0，實際上不是一個班或不應點擊。我們用它來填充地圖，但實際上並不知道如何將它從腳本中提取出來，而是使其在CSS文件中透明。 2.我們需要某種表格來顯示選中的座位，並在點擊多個時將其計數。我們非常困難，非常感謝一些幫助。親切的問候，

韋塞爾奧爾德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>

來源

2014-10-27 Wessel Olde Olthof

我放在一起的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); 
});

來源

2014-10-27 13:18:06 Moritz

非常感謝你的工作！我definitly現在continou我的工作！非常感謝^^ – 2014-10-27 13:28:48

預約系統障礙

回答

相關問題