基於jQuery實現線上選座之高鐵版_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實現線上選座之高鐵版，希望大家喜歡。