2

学校のプロジェクトでは、映画館の予約システムを作成する必要があります。これにより、人々は自分が座りたい席を選択できるようになります。

要件の 1 つは、誰かが椅子を予約した場合、他の誰かがその椅子を予約できないようにすることです。

私の考えは、ページの下部にある [チケットを購入] をクリックしたときに、選択した椅子にクラスを追加することでしたが、これらのクラスを保存するにはどうすればよいですか。さらに遠く。

これは私がすでに持っているものの一部です：

<script>
 var total = 0;
 var countBlauw = 0;
 var countOranje = 0;
 var countRood = 0;
 $(document).ready(function(){
     $(".blauw").toggle(function () {
       $(this).removeClass("blauw").addClass("select");
 countBlauw++;
 total+=7.5;
 calculateTotal();
 }, function() { 
       $(this).removeClass("select").addClass("blauw");
 countBlauw--;
       total-=7.5;
 calculateTotal();
     });
 $(".oranje").toggle(function () {
       $(this).removeClass("oranje").addClass("select");
 countOranje++;
 total+=10;
 calculateTotal();
 }, function() {
       $(this).removeClass("select").addClass("oranje");
 countOranje--;
       total-=10;
 calculateTotal();
     });
 $(".rood").toggle(function () {
       $(this).removeClass("rood").addClass("select");
 countRood++;
       total+=15;
 calculateTotal();
 }, function() {
       $(this).removeClass("select").addClass("rood");
 countRood--;
       total-=15;
 calculateTotal();
     });
 });
 </script> 
        <script>
        function calculateTotal()
        {
            var divobj = document.getElementById('totalPrice');
            divobj.style.display='block';
            divobj.innerHTML = "Prijs €"+total+"<br /> Aantal blauwe stoelen: "+countBlauw+"<br /> Aantal oranje stoelen: "+countOranje+"<br /> Aantal rode stoelen: "+countRood;

        }
        </script> 

        <table style="empty-cells: hide; border-collapse:separate; border-spacing:2px; border-style:solid;" border="0">
          <tr>
            <td class="leeg"></td>
            <td class="leeg"></td>
            <td class="blauw">&nbsp;</td>
            <td class="blauw">&nbsp;</td>
            <td class="blauw">&nbsp;</td>
            <td class="blauw">&nbsp;</td>
            <td class="blauw">&nbsp;</td>
            <td class="blauw">&nbsp;</td>
            <td class="blauw">&nbsp;</td>
            <td class="blauw">&nbsp;</td>
            <td class="leeg"></td>
            <td class="leeg"></td>
          </tr>
            And so forth.


        <script>
 $(window).load( function() {
  document.getElementById('totalPrice').innerHTML = "Prijs €"+total+"<br /> Aantal blauwe stoelen: "+countBlauw+"<br /> Aantal oranje stoelen: "+countOranje+"<br /> Aantal rode stoelen: "+countRood;
 });
 </script>
        <div id="totalPrice"></div>

.addClass() で追加されたクラスをローカルまたはセッション ストレージに保存することはできますか? これはシミュレーションにすぎないため、別のコンピューター (または別のブラウザーを使用している) の誰かが同じ座席を予約できるかどうかは問題ではありません。

誰かアドバイスをくれませんか？:)

4

1 に答える 1

1

localStorage文字列値のみを保存できるため、JSONを使用して配列を保存すると便利です。

function loadTakenSeats() {
    takenSeatsString = localStorage.takenSeats;
    return takenSeatsString
        ? JSON.parse(takenSeatsString)
        : [];
}

function saveTakenSeats(takenSeats) {
    localStorage.takenSeats = JSON.stringify(takenSeats);
}

シートが取得または解放されたら、保存された配列にそのIDを追加または削除します。

function takeSeat(seat) {
    $(seat).addClass('taken');
    var takenSeats = loadTakenSeats();
    takenSeats.push(seat.id);
    saveTakenSeats(takenSeats);
}

function untakeSeat(seat) {
    $(seat).removeClass('taken');
    var takenSeats = loadTakenSeats();
    takenSeats.splice(takenSeats.indexOf(seat.id),1);
    saveTakenSeats(takenSeats);
}

ページが読み込まれると、ストレージからボタンの状態を復元する必要があります。

  $.each(loadTakenSeats(), function(i, seat){
        $('#'+seat).addClass('taken');
  });

このコードは特に堅牢ではないことに注意してください。より適切な実装では、格納された配列内の値の重複を回避し、ボタンスタイルの変更idとストレージへの追加などを区別します。

試してみるための完全な例をアップロードしました。

于 2012-10-31T21:59:22.863 に答える