Hochgeschwindigkeitsversion der Online-Sitzplatzauswahl basierend auf jQuery_jquery

Rendering-Anzeige:

Demo ansehen Quellcode herunterladen

Neben der Online-Sitzplatzauswahl in Kinos werden wir auch bei der Sitzplatzauswahl in Flugzeugkabinen und natürlich bei der Auswahl von Bus- und Bahntickets mitwirken. Wenn Sie eines Tages Bahntickets kaufen und auch eine Online-Sitzplatzauswahl anbieten können, dann werde ich Ihnen heute vorstellen, wie Sie mit dem jQuery-Sitzplatzauswahl-Plug-in die Sitzplatzanordnung, Sitzplatzauswahl und Preise für verschiedene Klassen von Hochgeschwindigkeitszügen vervollständigen können Sitze.

HTML

Wie im vorherigen Artikel: jQuery Online-Sitzplatzauswahl und -reservierung (Theater) verwenden wir dieselbe HTML-Struktur, wobei links die Standortlayoutkarte und rechts Informationen zur Sitzplatzauswahl angezeigt werden.

Bitte laden Sie den DEMO-Quellcode herunter, um den relevanten CSS-Code anzuzeigen, der in diesem Artikel nicht näher beschrieben wird.

<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

Um uns auf den jQuery-Code zu konzentrieren, verwenden wir weiterhin das Online-Sitzplatzauswahl-Plug-in: jQuery Seat Charts. Ordnen Sie zunächst die Sitzanordnung des Hochgeschwindigkeitswaggons an. Ich gehe davon aus, dass es im Wagen Nr. 01 Sitze der ersten und zweiten Klasse gibt, die durch Ein- und Ausstiegsgänge getrennt sind. Die allgemeine Anordnung ist wie folgt:

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

Der obige Code f steht für Sitzplätze in der ersten Klasse, e für Sitzplätze in der zweiten Klasse und das Symbol „_“ für den Gang.

Dann müssen wir die relevanten Attribute des Sitztyps definieren:

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

Der obige Code definiert den Preis, den Kategorienamen und den entsprechenden CSS-Stil für Sitzplätze in der ersten und zweiten Klasse. Sie können später über die Methode data() aufgerufen werden.

Als nächstes verwenden wir die Benennung, um die Zeilen- und Spalteninformationen der Sitzkarte zu definieren. Wenn Sie oben auf „True“ setzen, wird die obere Abszisse (Zeile) und die Ordinate (Spalte) angezeigt. Der Wert getLabel wird verwendet, um Sitzplatzinformationen zurückzugeben, z. B.: 01A bedeutet Sitzplatz A in Reihe 01.

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; 
 } 
}, 

Dann verwenden wir legend, um die Legende zu definieren. Das mit der Legende verknüpfte Element ist #legend und definiert den entsprechenden Stil für den Sitztyp.

legend : { //定义图例 
 node : $('#legend'), 
 items : [ 
 [ 'f', 'available', '一等座' ], 
 [ 'e', 'available', '二等座'], 
 [ 'f', 'unavailable', '已售出'] 
 ]  
}, 

Wenn Sie abschließend auf die Position im Sitzplan draußen klicken, werden je nach aktuellem Sitzplatzstatus unterschiedliche Verarbeitungen durchgeführt, einschließlich der Berechnung der Anzahl der Tickets und des Gesamtbetrags usw. Sie können sich an die Anweisungen im Theater halten Kapitel.

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(); 
 } 
}, 

Abschließend verwenden wir die Methoden get() und status(), um die Plätze festzulegen, die verkauft wurden und nicht verfügbar sind.

//Verkauft, keine Plätze verfügbar

sc.get(['01_A', '04_A', '07_B', '07_F']).status('unavailable'); 

Es ist erwähnenswert, dass Sie bei häufigen Ticketkäufen auf der Website darauf achten müssen, den Sitzplatzplan rechtzeitig zu aktualisieren. Wenn der Sitzplatz vorbelegt wurde, ist er nicht verfügbar. Wir können Ajax verwenden, um asynchrone Anfragen zu stellen und sie so einzustellen, dass sie alle 10 Sekunden ausgeführt werden. Sie können sich auf den folgenden Code beziehen:

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秒

Das Obige ist die in diesem Artikel vorgestellte Hochgeschwindigkeitsversion der Online-Sitzplatzauswahl auf Basis von jQuery.