效果图显示：

下载下载演示源代码

除了在电影院在线选择，我们也将在飞机客舱内选择接触，当然汽车票火车座位。如果有一天，火车票还提供在线选座，今天我将向你展示如何使用jQuery插件来完成选座高铁列车座椅布局，手术选择座位，座位不同类估值。

HTML

像一篇文章：jQuery在线选举座位预订（电影论文），我们使用相同的HTML结构，显示位置布局，显示在正确的座位选择信息。

CSS代码下载演示源码查看，本文不再详细介绍。






01辆车


选择座位信息：

票数：
共计：0美元

确定购买





jQuery

重点放在jQuery代码上，我们仍然使用在线基座插件：jQuery座位图表。首先，安排高速铁路汽车座椅的布局。我想01舱有头等舱和两个座位。




映射：
ff__ff，
ff__ff，
______，
eee_ee，
eee_ee，
eee_ee，
eee_ee，
eee_ee，
eee_ee
}，


上面的代码是一个座位，E是两，象征_通道。

然后我们必须定义座椅类型的相关属性：




座位：定义属性座位
{ F：
价格：100，
类：'first-class，
catery：第一座
}，
{ E：
价格：40，
类：'economy-class，
catery：两座
}
}，


上面的代码定义了第一个和两个座位的价格、类别名称和相应的CSS样式，它们可以通过后面的数据（）方法调用。



然后我们使用命名定义的座位图信息的行列，下面的真实的显示在横坐标上的行和列（行），用于定义横坐标（行）和纵坐标（列）的值，getlabel用于返回座位信息，如：01a 01排一座。




命名：定义行列和其他信息
顶：真的，
列：{ A，B，C，D，F'，‘}，
行：{ 01，才会'，' '，2003，2004、2005、2006、2007、2008、2009}，
getlabel：函数（字符、行、列）{
返回行+列；
}
}，


然后我们用图例来定义插图。与传说相关的元素#传奇，和座式相应的风格定义。




图例：{定义图例
结：$（' #传奇），
项目：{
{ F，可用'，'第一座，
{ e，可用'，'两座}，
{ F，'unavailable '，'卖' }
}
}，




最后，当我们点击（点击）座位地图中的位置时，我们可以根据当前座位的状态进行不同的处理，包括计数票数和总金额等，我们可以参考剧院章节的解释。




单击：函数（）{
如果（这个状态）=可用的（可选）{ / /座
（+的数据）。catery + 01（$+，设置标签+$+ this.data（价格+））
.attr（'id'，'cart-item+这个设置。ID）
。数据（'seatid '，这个设置。ID）
appendto（合车）；
更新选票
counter.text美元（sc.find（选中的）。长度+ 1）；
总金额计算
total.text美元（recalculatetotal（SC）+ this.data（）。价格）；
return'selected；
Else if (this.status)} = ('selected') {// is selected
counter.text美元（sc.find（选中的）。length-1）；
total.text美元（recalculatetotal（SC）-this.data（）。价格）；
有预订/删除
$（#车项目-+，设置ID）删除（）；
return'available；
如果（这个状态）}（'unavailable ' = { / /）已售出
已售出
return'unavailable；
{人}
返回this.style（）；
}
}，


最后，我们使用get（）和状态（）方法设置已售出的座位。



已售出可选座位




sc.get（{ '01_a '，'04_a '，'07_b '，'07_f ' }）状态（'unavailable）；


值得一提的是，当网站购票频繁时，要注意及时刷新座位地图。如果座位已被占用，它不是可选的。我们可以使用Ajax进行异步请求，并设置每10秒运行一次，我们可以参考下面的代码：




setInterval（）{（）函数（
$ ajax（{
类型：' '，
网址：'book PHP的，
DataType：'json，
成功：函数（响应）{
遍历所有的座位
美元。每个（response.bookings，函数（指数、预订）{
将已售出的席位设为已出售的州。
sc.status（预订。seat_id，'unavailable）；
}）；
}
}）；
}，10000）；每10秒


以上是本文介绍的基于jQuery的在线座位选择的高速版，希望大家喜欢。