javascript - JS中在线选座已经实现点击座位将select对应怎么反过来点击select对应座位

程序员文章站 2022-06-16 11:56:28

...

当我选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);

回复内容：

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').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了。

javascript - JS中在线选座 已经实现点击座位将select对应怎么反过来点击select对应座位

回复内容：