如何進(jìn)行jQuery在線高鐵選座，很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。

創(chuàng)新互聯(lián)建站長(zhǎng)期為上1000+客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開(kāi)放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為新沂企業(yè)提供專業(yè)的網(wǎng)站制作、網(wǎng)站建設(shè)，新沂網(wǎng)站改版等技術(shù)服務(wù)。擁有10余年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。

除了電影院在線選座，我們還會(huì)接觸到飛機(jī)機(jī)艙選座，當(dāng)然也有汽車(chē)票火車(chē)票選座的。假如有一天買(mǎi)火車(chē)票也提供在線選座，那么今天我來(lái)給大家介紹下如何使用jQuery選座插件完成高鐵列車(chē)座位布置、選座、不同等級(jí)座位計(jì)價(jià)等操作。

HTML

使用相同的html結(jié)構(gòu)，左側(cè)顯示位置布局圖，右側(cè)顯示選座相關(guān)信息。

<p class="container"> <p id="seat-map"> <p class="front">01車(chē)</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">確定購(gòu)買(mǎi)</button> <p id="legend"></p> </p> </p>

jQuery

重點(diǎn)來(lái)關(guān)注jQuery代碼，我們還是使用在線選座插件：jQuery Seat Charts。首先安排高鐵車(chē)廂座位布局，我假設(shè)在01號(hào)車(chē)廂內(nèi)有一等座和二等座若干，中間通過(guò)出入口通道隔開(kāi)，大致布局如下：

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

上面的代碼f表示的是一等座，e表示的是二等座，符號(hào)"_"表示過(guò)道。

然后我們要定義座位類型的相關(guān)屬性：

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

上面的代碼定義了一等座和二等座的價(jià)格、類別名稱以及對(duì)應(yīng)的css樣式。他們可以在后面通過(guò)data()方法調(diào)用。

接下來(lái)我們用naming來(lái)定義座位圖的行列信息，如下top設(shè)置為true則表示顯示頂部橫坐標(biāo)（行），columns和rows分別用來(lái)定義橫坐標(biāo)（行）和縱坐標(biāo)（列）的值，getLabel用來(lái)返回座位信息，如：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來(lái)定義圖例，對(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ì)等，可以參照影院篇的說(shuō)明。

click: function () { if (this.status() == 'available') {//可選座 $('<li>'+this.data().category+'<br/>01車(chē)'+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)站購(gòu)票非常頻繁時(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)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，的支持。

網(wǎng)頁(yè)名稱：如何進(jìn)行jQuery在線高鐵選座-創(chuàng)新互聯(lián)
當(dāng)前網(wǎng)址：http://www.chinadenli.net/article38/dcdjsp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、自適應(yīng)網(wǎng)站、標(biāo)簽優(yōu)化、做網(wǎng)站、域名注冊(cè)、云服務(wù)器

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)