您好,登錄后才能下訂單哦!
如何進(jìn)行jQuery在線高鐵選座,很多新手對(duì)此不是很清楚,為了幫助大家解決這個(gè)難題,下面小編將為大家詳細(xì)講解,有這方面需求的人可以來學(xué)習(xí)下,希望你能有所收獲。
除了電影院在線選座,我們還會(huì)接觸到飛機(jī)機(jī)艙選座,當(dāng)然也有汽車票火車票選座的。假如有一天買火車票也提供在線選座,那么今天我來給大家介紹下如何使用jQuery選座插件完成高鐵列車座位布置、選座、不同等級(jí)座位計(jì)價(jià)等操作。
使用相同的html結(jié)構(gòu),左側(cè)顯示位置布局圖,右側(cè)顯示選座相關(guān)信息。
<p class="container">
<p id="seat-map">
<p class="front">01車</p>
</p>
<p class="booking-details">
<h4> 選座信息:</h4>
<ul id="selected-seats"></ul>
<p>票數(shù): <span id="counter"></span></p>
<p>總計(jì): ¥<span id="total">0</span></p>
<button class="checkout-button">確定購買</button>
<p id="legend"></p>
</p>
</p>
重點(diǎn)來關(guān)注jQuery代碼,我們還是使用在線選座插件:jQuery Seat Charts。首先安排高鐵車廂座位布局,我假設(shè)在01號(hào)車廂內(nèi)有一等座和二等座若干,中間通過出入口通道隔開,大致布局如下:
map: [ //座位圖
'ff__ff',
'ff__ff',
'______',
'eee_ee',
'eee_ee',
'eee_ee',
'eee_ee',
'eee_ee',
'eee_ee'
],
上面的代碼f表示的是一等座,e表示的是二等座,符號(hào)"_"表示過道。
然后我們要定義座位類型的相關(guān)屬性:
seats: { //定義座位屬性
f: {
price : 100,
classes : 'first-class',
category: '一等座'
},
e: {
price : 40,
classes : 'economy-class',
category: '二等座'
}
},
上面的代碼定義了一等座和二等座的價(jià)格、類別名稱以及對(duì)應(yīng)的css樣式。他們可以在后面通過data()方法調(diào)用。
接下來我們用naming來定義座位圖的行列信息,如下top設(shè)置為true則表示顯示頂部橫坐標(biāo)(行),columns和rows分別用來定義橫坐標(biāo)(行)和縱坐標(biāo)(列)的值,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來定義圖例,對(duì)應(yīng)圖例關(guān)聯(lián)的元素是#legend,并對(duì)座位類型定義對(duì)應(yīng)的樣式。
legend : { //定義圖例
node : $('#legend'),
items : [
[ 'f', 'available', '一等座' ],
[ 'e', 'available', '二等座'],
[ 'f', 'unavailable', '已售出']
]
},
最后在外面點(diǎn)擊(click)座位圖中的位置時(shí),根據(jù)當(dāng)前座位的狀態(tài)做出不同的處理,包括計(jì)算票數(shù)和金額總計(jì)等,可以參照影院篇的說明。
click: function () {
if (this.status() == 'available') {//可選座
$('<li>'+this.data().category+'<br/>01車'+this.settings.label+'號(hào)<br/>¥'+this.data().price+'</li>')
.attr('id', 'cart-item-'+this.settings.id)
.data('seatId', this.settings.id)
.appendTo($cart);
//更新票數(shù)
$counter.text(sc.find('selected').length+1);
//計(jì)算總計(jì)金額
$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);
//刪除已預(yù)訂座位
$('#cart-item-'+this.settings.id).remove();
return 'available';
} else if (this.status() == 'unavailable') {//已售出
//已售出
return 'unavailable';
} else {
return this.style();
}
},
最后,我們使用get()和status()方法設(shè)置已經(jīng)售出不可選的座位。
//已售出不可選座
sc.get(['01_A', '04_A', '07_B', '07_F']).status('unavailable');
值得一提的是,當(dāng)網(wǎng)站購票非常頻繁時(shí)需要注意及時(shí)刷新座位圖,如果座位已經(jīng)被搶占了則不可選。我們可以使用ajax進(jìn)行異步請(qǐng)求,并且設(shè)置每隔10秒鐘運(yùn)行一次,可以參照如下代碼:
setInterval(function() {
$.ajax({
type : 'get',
url : 'book.php',
dataType : 'json',
success : function(response) {
//遍歷所有座位
$.each(response.bookings, function(index, booking) {
//將已售出的座位狀態(tài)設(shè)置為已售出
sc.status(booking.seat_id, 'unavailable');
});
}
});
}, 10000); //每10秒
看完上述內(nèi)容是否對(duì)您有幫助呢?如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章,請(qǐng)關(guān)注億速云行業(yè)資訊頻道,感謝您對(duì)億速云的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。