基于jQuery的高铁版在线选座

效果图显示：

查看演示源代码下载

除了在电影院在线选座，我们还会接触到飞机客舱的选座，当然也有大巴票和火车票。如果有一天买火车票的时候提供了在线选座，今天我就来介绍一下如何使用jQuery选座插件来完成高速列车的排座、选座，以及不同等级的座位定价的操作。

超文本标记语言

与上一篇文章相同：jQuery在线选座和预约(院线文章)，我们使用相同的html结构，左侧展示位置布局，右侧展示选座的相关信息。

相关CSS代码请下载DEMO源代码，本文不再详细介绍。

div class=' container ' div id=' seat-map ' div class=' front ' 01 car/div/div class=' booking-details ' H3座位选择信息：/h3 ul id='selected-seats'/Ul p投票： span id='counter'/span/p总计： span id=' total' 0/span/p按钮class=' check-button '确认购买/按钮div id=' legend '/div/div/div/div jquery

关注jQuery代码，我们仍然使用在线座位选择插件：jQuery座位图。首先，安排高铁车厢的座椅布局。我假设01号车厢有几个一等座和二等座，由进出通道隔开。总平面布置如下：

Map: [//座位图' ff _ _ ff '，' ff _ _ ff '，' _ _ _ _ _ '，' eee _ ee '，' eee _ ee '，

然后我们需要定义座位类型的相关属性：

Seats: {//定义座位属性f: {price: 100，class 3360 '头等舱'，Classs: '头等舱' }，e: {price : 40，Classs: '经济舱'，category : '二等座' }，上面的代码定义了一等座和二等座的价格、类别名称和对应的css样式。稍后可以通过data()方法调用它们。

接下来，我们使用命名来定义座位表的行和列信息。如果top设置为true，则表示显示顶部横坐标(行)；列和行分别用于定义横坐标(行)和纵坐标(列)的值；getLabel用于返回座位信息，例如01A表示01排A座。

命名： {//定义行和列等信息top:true，column 3360[' a '，' b '，' c '，'，' d '，' f']，row :[' 01 '，' 02 '，' 03' getLabel :函数(字符，行，列){返回行列；}}，然后我们用legend来定义图例，与图例关联的元素是#legend，并且为座椅类型定义了相应的样式。

Legend : {//定义legend node: $ ('# legend ')、items: [['f '，'可用'，'第一类']，['e '，'可用'，'第二类']，['f '，'不可用'

最后，当你点击外面座位图中的位置时，可以根据当前的座位状态做出不同的处理，包括计算票数和钱的总数等。你可以参考电影院的说明。

点击：函数(){if (this。status()==' available '){//可选座位$('李'本。数据()。类别' br/01 car ' this . settings . label ' br/this . data()。价格'/li ')。attr('id '，' cart-item-' this.settings.id)。数据(' seatId '，this.settings.id)。appendo($ cart)；//更新票数$ counter . text(sc . find(' selected '). length 1)；//计算总额$ total.text(重新计算总额(sc) this.data()。价格)；返回“选定”；} else if(这个。status()==' selected '){//$ counter。文本(sc。查找('选定')。长度-1)已被选择；$total.text(重新计算Total(sc)-this.data()。价格)；//删除预留座位$ ('# cart-item-'this。settings.id)。移除()；返回“可用”；} else if(这个。status ()=='不可用'){//已售//已售退货'不可用'；} else { return this . style()；}}，最后，我们使用get()和status()方法来设置售出的非可选座位。

//非可选座位已售出

sc.get(['01_A '，' 04_A '，' 07_B '，' 07_F'])。状态(“不可用”)；值得一提的是，网站频繁购票时，需要及时刷新座位图，如果座位已经被抢占，则不可选。我们可以使用ajax发出异步请求，并将其设置为每10秒运行一次。您可以参考以下代码：

setInterval(函数(){ $)。ajax({ type : 'get '，url : 'book.php '，dataType : 'json '，Success3360函数(response) {//traverse all seats $。每个(响应。预订，功能(索引，预订){//将已售座位的状态设置为sc。状态(预订。seat _ id，“不可用”)；});} });}, 10000);//每10秒以上就是本文介绍的基于jQuery的高铁版在线选座。希望大家喜欢。