Versi rel berkelajuan tinggi pemilihan tempat duduk dalam talian berdasarkan jQuery_jquery

Paparan pemaparan:

Lihat demo Muat turun kod sumber

Selain pemilihan tempat duduk dalam talian di pawagam, kami juga akan terlibat dalam pemilihan tempat duduk di kabin kapal terbang, dan sudah tentu, pemilihan tiket bas dan kereta api. Jika suatu hari nanti anda boleh membeli tiket kereta api dan juga menyediakan pemilihan tempat duduk dalam talian, maka hari ini saya akan memperkenalkan kepada anda cara menggunakan pemalam pemilihan tempat duduk jQuery untuk melengkapkan susun atur tempat duduk kereta api berkelajuan tinggi, pemilihan tempat duduk, dan penetapan harga kelas yang berbeza tempat duduk.

HTML

Sama seperti artikel sebelumnya: pemilihan dan tempahan tempat duduk dalam talian jQuery (teater), kami menggunakan struktur html yang sama, dengan peta susun atur lokasi dipaparkan di sebelah kiri dan maklumat berkaitan pemilihan tempat duduk dipaparkan di sebelah kanan.

Sila muat turun kod sumber DEMO untuk melihat kod CSS yang berkaitan, yang tidak akan diperincikan dalam artikel ini.

<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

Untuk memfokus pada kod jQuery, kami masih menggunakan pemalam pemilihan tempat duduk dalam talian: Carta Tempat Duduk jQuery. Pertama, susun susun atur tempat duduk kereta rel berkelajuan tinggi Saya mengandaikan bahawa terdapat tempat duduk kelas pertama dan tempat duduk kelas kedua di Kereta No. 01, dipisahkan oleh laluan masuk dan keluar >

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

Kod f di atas mewakili tempat duduk kelas pertama, e mewakili tempat duduk kelas kedua dan simbol "_" mewakili lorong.

Kemudian kita perlu mentakrifkan atribut yang berkaitan bagi jenis tempat duduk:

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

Kod di atas mentakrifkan harga, nama kategori dan gaya css yang sepadan untuk tempat duduk kelas pertama dan kelas kedua. Mereka boleh dipanggil kemudian melalui kaedah data().

Seterusnya kami menggunakan penamaan untuk mentakrifkan maklumat baris dan lajur peta tempat duduk Menetapkan atas kepada benar di bawah bermakna memaparkan abscissa (baris atas) digunakan untuk menentukan abscissa (baris) dan ordinat (lajur). Nilai, getLabel digunakan untuk mengembalikan maklumat tempat duduk, seperti: 01A bermaksud tempat duduk A dalam baris 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; 
 } 
}, 

Kemudian kami menggunakan legenda untuk mentakrifkan legenda Elemen yang dikaitkan dengan legenda ialah #legend dan menentukan gaya yang sepadan untuk jenis tempat duduk.

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

Akhir sekali, apabila anda mengklik pada kedudukan dalam peta tempat duduk di luar, pemprosesan yang berbeza akan dilakukan mengikut status tempat duduk semasa, termasuk mengira bilangan tiket dan jumlah keseluruhan, dsb. Anda boleh merujuk kepada arahan dalam teater bab.

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

Akhir sekali, kami menggunakan kaedah get() dan status() untuk menetapkan tempat duduk yang telah dijual dan tidak tersedia.

//Dijual, tiada tempat duduk tersedia

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

Perlu dinyatakan bahawa apabila pembelian tiket di laman web sangat kerap, anda perlu memberi perhatian untuk menyegarkan peta tempat duduk tepat pada masanya Jika tempat duduk telah didahulukan, ia tidak tersedia. Kami boleh menggunakan ajax untuk membuat permintaan tak segerak dan menetapkannya untuk dijalankan setiap 10 saat Anda boleh merujuk kepada kod berikut:

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秒

Di atas ialah versi rel berkelajuan tinggi untuk pemilihan tempat duduk dalam talian berdasarkan jQuery yang diperkenalkan dalam artikel ini.