效果圖展示：
除了電影院在線選座，我們還會接觸到飛機機艙選座，當然也有汽車票火車票選座的。假如有一天買火車票也提供在線選座，那么今天我來給大家介紹下如何使用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實現在線選座之高鐵版，希望大家喜歡。
新聞熱點
疑難解答
