宜宾网站建设公司

如何进行jQuery在线高铁选座-创新互联

如何进行jQuery在线高铁选座，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

创新互联建站长期为上1000+客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为新沂企业提供专业的网站制作、网站建设，新沂网站改版等技术服务。拥有10余年丰富建站经验和众多成功案例,为您定制开发。

除了电影院在线选座，我们还会接触到飞机机舱选座，当然也有汽车票火车票选座的。假如有一天买火车票也提供在线选座，那么今天我来给大家介绍下如何使用jQuery选座插件完成高铁列车座位布置、选座、不同等级座位计价等操作。

HTML

使用相同的html结构，左侧显示位置布局图，右侧显示选座相关信息。

01车

选座信息：

    票数:

    总计: ￥0

    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') {//可选座 $('

  • '+this.data().category+'
    01车'+this.settings.label+'号
    ￥'+this.data().price+'
    • ') .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在线高铁选座-创新互联
    标题网址：http://ybzwz.com/article/dcdjsp.html

    其他资讯