[英]Save .addClass() with local/session storage
对于学校项目,我需要为电影院建立预订系统,以便人们可以选择要坐在的座位。
一个要求是,如果有人预订了椅子,那么其他人就不应该再预订它了。
我的想法是,当您单击页面底部的“购买门票”时,将课程添加到选定的椅子上,但是我该如何保存这些课程,我的教授说我应该使用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"> </td>
<td class="blauw"> </td>
<td class="blauw"> </td>
<td class="blauw"> </td>
<td class="blauw"> </td>
<td class="blauw"> </td>
<td class="blauw"> </td>
<td class="blauw"> </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()的类保存到本地或会话存储中? 这只是一个模拟,因此,另一台计算机(或使用其他浏览器)上的人可以预订同一席位并不重要。
有人可以给我一些建议吗? :)
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
添加到存储等方面分别进行更改。
我已经上传了完整的示例进行试用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.