jQuery_jquery に基づく高速鉄道バージョンのオンライン座席選択

レンダリング表示:

デモを見る ソースコードのダウンロード

映画館でのオンライン座席選択に加えて、飛行機の客室での座席選択、そしてもちろんバスや電車のチケットの選択にも関与します。いつか鉄道のチケットを購入でき、オンラインで座席指定もできるようになったら、今日は、jQuery 座席選択プラグインを使用して、高速鉄道の座席レイアウト、座席選択、およびさまざまなクラスの価格設定を完了する方法を紹介します。席。

HTML

前回の記事: jQuery オンライン座席選択と予約 (劇場) と同様に、同じ HTML 構造を使用し、左側に場所の配置図が表示され、右側に座席選択関連情報が表示されます。

関連する CSS コードを表示するには、デモ ソース コードをダウンロードしてください。この記事では詳しく説明しません。

<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号車には1等席と2等席があり、乗降通路で分かれていると思われます。

map: [ //座位图 
 'ff__ff', 
 'ff__ff', 
 '______', 
 'eee_ee', 
 'eee_ee', 
 'eee_ee', 
 'eee_ee', 
 'eee_ee', 
 'eee_ee' 
], 

上記の記号 f は 1 等席、e は 2 等席、記号「_」は通路を表します。

次に、座席タイプの関連属性を定義する必要があります:

seats: { //定义座位属性 
 f: { 
 price : 100, 
 classes : 'first-class', 
 category: '一等座' 
 }, 
 e: { 
 price : 40, 
 classes : 'economy-class', 
 category: '二等座' 
 }  
}, 

上記のコードは、ファーストクラスとセカンドクラスの座席の価格、カテゴリ名、および対応する CSS スタイルを定義します。これらは後で data() メソッド経由で呼び出すことができます。

次に、名前を使用してシート マップの行と列の情報を定義します。以下で top を true に設定すると、上部の横座標 (行) が表示されます。列と行は、横座標 (行) と縦座標 (列) を定義するために使用されます。値、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 : { //定义图例 
 node : $('#legend'), 
 items : [ 
 [ 'f', 'available', '一等座' ], 
 [ 'e', 'available', '二等座'], 
 [ 'f', 'unavailable', '已售出'] 
 ]  
}, 

最後に、屋外の座席表の位置をクリックすると、チケット枚数や合計金額の計算など、現在の座席状況に応じてさまざまな処理が行われます。劇場内の説明を参照できます。章。

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 に基づくオンライン座席選択の高速鉄道バージョンです。