Question

对于学校项目，我需要为电影院制作预订系统，以便人们可以选择想要坐的座位。

一个要求是，如果有人预订了一把椅子，那么其他人就不应该再预订了。

我的想法是当你点击页面底部的“购买门票”时为所选的椅子添加一个课程，但我怎么能保存这些课程，我的教授说我应该使用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（）添加的类保存到本地或会话存储？它应该只是一个模拟，所以如果另一台计算机（或其他浏览器）上的某个人可以预订相同的座位并不重要。

有人可以给我一些建议吗？：）

Answer 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添加到存储等等。

我已上传a complete example试用。

使用本地/会话存储保存.addClass（）

1 个答案: