javascript - JS中線上選座 已經實現點擊座位將select對應怎麼反過來點擊select對應座位

當我選select時間如A2則對應available和click
/ 已經實現點擊座位，將select對應怎麼 反過來點擊select對應座位 /

var $cart = $('#selected-seats'),$counter = $('#counter'),$total = $('#total'),sc = $('#seat-map').seatCharts({    map: [ //座位元影像        'ff__ff',        'ff__ff',        '_____',        'ff__ff',        'ff__ff',        'ff__ff',        'ff__ff',        'ff__ff',        'ff__ff'    ],    seats: { //定義座位屬性        f: {            price   : 100,            classes : 'first-class',             category: '一等座'        },        e: {            price   : 40,            classes : 'economy-class',             category: '二等座'        }                        },    naming : { //定義行列等資訊        top : true,        columns: ['A', 'B', 'C', 'D', 'F','G'],        rows: ['1','2','','3','4','5','6','7','8','9'],        getLabel : function (character, row, column) {            return column + row;        }    },    legend : { //定義圖例        node : $('#legend'),        items : [            [ 'f', 'available',   '一等座' ],            [ 'e', 'available',   '二等座'],            [ 'f', 'unavailable', '已停用']        ]                        },    click: function () {        if (this.status() == 'available') {//可選座              $('
' + this.data().category + '
' + this.settings.label + '號位
')            .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();        }    },    focus  : function() {        if (this.status() == 'available') {            $("#seat-info").show().html(this.settings.label+ '號位');            var cd = getMousePoint(event);            $("#seat-info").css({"left":(cd.x+10)+'px',"top":(cd.y-30)+"px"});            return 'focused';        } else  {            return this.style();        }    }});

/ 點擊座位，將select對應 /

$(".available").on("click", function(){    var txt = $(this).text();        //擷取當天點擊 位置 所在的行 的索引，用以判斷是一等座還是二等座    var index = $(this).parent(".seatCharts-row").index();    //6及6以上為二等座    if(index>=6){                var htmlTxt = ""+ txt +"";                }else{            var htmlTxt = ""+ txt +"";            }                $("select").find("option:selected").val(txt);        $("select").find("option:selected").text(htmlTxt);

回複內容：

當我選select時間如A2則對應available和click
/ 已經實現點擊座位，將select對應怎麼 反過來點擊select對應座位 /

var $cart = $('#selected-seats'),$counter = $('#counter'),$total = $('#total'),sc = $('#seat-map').seatCharts({    map: [ //座位元影像        'ff__ff',        'ff__ff',        '_____',        'ff__ff',        'ff__ff',        'ff__ff',        'ff__ff',        'ff__ff',        'ff__ff'    ],    seats: { //定義座位屬性        f: {            price   : 100,            classes : 'first-class',             category: '一等座'        },        e: {            price   : 40,            classes : 'economy-class',             category: '二等座'        }                        },    naming : { //定義行列等資訊        top : true,        columns: ['A', 'B', 'C', 'D', 'F','G'],        rows: ['1','2','','3','4','5','6','7','8','9'],        getLabel : function (character, row, column) {            return column + row;        }    },    legend : { //定義圖例        node : $('#legend'),        items : [            [ 'f', 'available',   '一等座' ],            [ 'e', 'available',   '二等座'],            [ 'f', 'unavailable', '已停用']        ]                        },    click: function () {        if (this.status() == 'available') {//可選座              $('
' + this.data().category + '
' + this.settings.label + '號位
')            .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();        }    },    focus  : function() {        if (this.status() == 'available') {            $("#seat-info").show().html(this.settings.label+ '號位');            var cd = getMousePoint(event);            $("#seat-info").css({"left":(cd.x+10)+'px',"top":(cd.y-30)+"px"});            return 'focused';        } else  {            return this.style();        }    }});

/ 點擊座位，將select對應 /

$(".available").on("click", function(){    var txt = $(this).text();        //擷取當天點擊 位置 所在的行 的索引，用以判斷是一等座還是二等座    var index = $(this).parent(".seatCharts-row").index();    //6及6以上為二等座    if(index>=6){                var htmlTxt = ""+ txt +"";                }else{            var htmlTxt = ""+ txt +"";            }                $("select").find("option:selected").val(txt);        $("select").find("option:selected").text(htmlTxt);

$('select').on('change', function(){    var _this = $(this);    //這裡擷取選中值，例如A4    var seatCode = _this.find("option:selected").val().split(""); //不知道你放的是什麼值，假裝這裡是A4    //然後可以根據數組[A,4]具體進行樣式的切換和你自己的商務邏輯});

你的HTML和JS混編的很厲害，這樣邏輯不清楚，而且失去彈性，比如說如果使用者說我要2個二等座，明顯你的代碼已經擴充不出來了。推薦你先用JS搞定邏輯，至於顯示的問題稍後搞定就OK了。例

座位清單 = {'A1': {已選: false; 等級：一等; 左邊：false, 右邊: A2, 前面: false, 後面: B1}, 'A2': {已選: true， 等級：一等; 左邊：A1, 右邊: false, 前面: false, 後面: B2}, ...};地區清單 = {一等：[A1, A2,...], 二等：...};function isSelectedSeat(x, y) {    if (y) x = x + y;    return 座位清單[x].已選;}function getFreeSeats(lv) {    var free = [];    foreach 座位編號 from 地區清單.lv {        if (isSelectedSeat(座位編號)            free.push(座位編號);    }    return free;}function setSeatSelected(sites, disableSelected) {    //將一個座位設為選中/取消，你可以在此處增加對HTML的處理    return true/false/void;}function autoSelected(座位等級，訂票數量）{    //這個比較麻煩，你要選出等級中的空座，然後盡量把位置連續的找出來，如果你很善良應該優先推薦最好的位置，或者你返回所有可供選擇的組合也行（這通常用於接線員處理電話訂票的時候）。    var useableSeats = [];    ...    return useableSeats.length ? useableSeats : false;}

通過以上的邏輯，不管你點座位還是用下拉框，最終都是調用setSeatSelected處理，而autoSelected是自動推薦座位演算法，邏輯上自動推薦之後你需要詢問使用者這個位置行不行才能調用後面的處理。

上面的偽碼主要是書寫方便，你可以自行將其封裝為對象，這樣如果你們有多個場所的話只要用適當的參數執行個體化一下就OK了。

