基于jQuery实现在线选座之高铁版

效果图展示：

查看演示源码下载
除了电影院在线选座，我们还会接触到飞机机舱选座，当然也有汽车票火车票选座的。假如有一天买火车票也提供在线选座，那么今天我来给大家介绍下如何使用jQuery选座插件完成高铁列车座位布置、选座、不同等级座位计价等操作。
HTML
和上一篇文章一样：jQuery在线选座订座（影院篇），我们使用相同的html结构，左侧显示位置布局图，右侧显示选座相关信息。
相关CSS代码请下载DEMO源码查看，本文不再详述。

<div class="container"><div id="seat-map"><div class="front">01车</div></div><div class="booking-details"><h3> 选座信息：</h3><ul id="selected-seats"></ul><p>票数: <span id="counter"></span></p><p>总计: ￥<span id="total">0</span></p><button class="checkout-button">确定购买</button><div id="legend"></div></div> </div>

jQuery
重点来关注jQuery代码，我们还是使用在线选座插件：jQuery Seat Charts。首先安排高铁车厢座位布局，我假设在01号车厢内有一等座和二等座若干，中间通过出入口通道隔开，大致布局如下：

map: [ //座位图"ff__ff","ff__ff","______","eee_ee","eee_ee","eee_ee","eee_ee","eee_ee","eee_ee" ],

上面的代码f表示的是一等座，e表示的是二等座，符号"_"表示过道。
然后我们要定义座位类型的相关属性：

seats: { //定义座位属性f: {price : 100,classes : "first-class",category: "一等座"},e: {price : 40,classes : "economy-class",category: "二等座"}},

上面的代码定义了一等座和二等座的价格、类别名称以及对应的css样式。他们可以在后面通过data（）方法调用。

接下来我们用naming来定义座位图的行列信息，如下top设置为true则表示显示顶部横坐标（行），columns和rows分别用来定义横坐标（行）和纵坐标（列）的值，getLabel用来返回座位信息，如：01A表示01排A座。

naming : { //定义行列等信息top : true,columns: ["A", "B", "C", "", "D","F"],rows: ["01","02","","03","04","05","06","07","08","09"],getLabel : function （character, row, column） {return row+column;} },

然后我们使用legend来定义图例，对应图例关联的元素是#legend，并对座位类型定义对应的样式。

legend : { //定义图例node : $（"#legend"）,items : [[ "f", "available", "一等座" ],[ "e", "available", "二等座"],[ "f", "unavailable", "已售出"]]},

最后在外面点击（click）座位图中的位置时，根据当前座位的状态做出不同的处理，包括计算票数和金额总计等，可以参照影院篇的说明。

click: function （） {if （this.status（） == "available"） {//可选座$（"<li>"+this.data（）.category+"<br/>01车"+this.settings.label+"号<br/>￥"+this.data（）.price+"</li>"）.attr（"id", "cart-item-"+this.settings.id）.data（"seatId", this.settings.id）.appendTo（$cart）;//更新票数$counter.text（sc.find（"selected"）.length+1）;//计算总计金额$total.text（recalculateTotal（sc）+this.data（）.price）;return "selected";} else if （this.status（） == "selected"） {//已选中$counter.text（sc.find（"selected"）.length-1）;$total.text（recalculateTotal（sc）-this.data（）.price）;//删除已预订座位$（"#cart-item-"+this.settings.id）.remove（）;return "available";} else if （this.status（） == "unavailable"） {//已售出//已售出return "unavailable";} else {return this.style（）;} },

最后，我们使用get（）和status（）方法设置已经售出不可选的座位。

//已售出不可选座

sc.get（["01_A", "04_A", "07_B", "07_F"]）.status（"unavailable"）;

值得一提的是，当网站购票非常频繁时需要注意及时刷新座位图，如果座位已经被抢占了则不可选。我们可以使用ajax进行异步请求，并且设置每隔10秒钟运行一次，可以参照如下代码：

setInterval（function（） {$.ajax（{type : "get",url : "book.php",dataType : "json",success : function（response） {//遍历所有座位$.each（response.bookings, function（index, booking） {//将已售出的座位状态设置为已售出sc.status（booking.seat_id, "unavailable"）;}）;}}）; }, 10000）; //每10秒

以上就是本文介绍基于jQuery实现在线选座之高铁版，希望大家喜欢。