2

对于一个学校项目，我需要制作一个电影院的预订系统，这样人们就可以选择他们想坐的座位。

一个要求是，如果有人预订了椅子，那么 ele 应该不能再预订了。

我的想法是在您单击页面底部的“购买门票”时为选定的椅子添加一个课程，但是我如何保存这些课程，我的教授说我应该使用 HTML 5 存储，但他们拒绝帮助我更远。

这是我现在已经拥有的一部分：

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