如何在jQuery Seat Charts中限制座位选择的数量

时间:2017-10-10 10:37:20

标签: javascript jquery

我使用jQuery Seat Charts作为票务预订系统。

var $cart = $('#selected-seats'),
        $counter = $('#counter'),
        $total = $('#total'),
        sc = $('#seat-map').seatCharts({
            map: [
                'aaaaaaaa__aaaaaaa',
                'aaaaaaaa__aaaaaaa',
                'aaaaaaaa__aaaaaaa',
                'aaaaaaaa__aaaaaaa',
                'aaaaaaaa__aaaaaaa',
                'aaaaaaaa__aaaaaaa',
                'aaaaaaaa__aaaaaaa',
                'aaaaaaaa__aaaaaaa',
                'aaaaaaaa__aaaaaaa',
                'aaaaaaaa__aaaaaaa',
                'aaaaaaaa__aaaaaaa',
                'aaaaaaaa__aaaaaaa',
                'aaaaaaaa__aaaaaaa',
                'aaaaaaaa__aaaaaaa',
                'aaaaaaaa__aaaaaaa',
                'aaaaaaaaaaaaaaaaa'
            ],
            seats: {
                a: {
                    price   : 50,
                    classes : 'first-class', //your custom CSS class
                    category: 'First Class'
                }

            },
            naming : {
                top : false,
                getLabel : function (character, row, column) {
                    return firstSeatLabel++;
                },
            },
            legend : {
                node : $('#legend'),
                items : [
                    [ 'a', 'available',   'First Class' ],
                    [ 'a', 'unavailable', 'Already Booked']

                ]
            },
            click: function () {
                if (this.status() == 'available') {
                    //let's create a new <li> which we'll add to the cart items
                    /*$('<li>'+this.data().category+' Seat # '+this.settings.label+': <b>$'+this.data().price+'</b> <a href="#" class="cancel-cart-item">[cancel]</a></li>')
                        .attr('id', 'cart-item-'+this.settings.id)
                        .data('seatId', this.settings.id)
                        .appendTo($cart);*/
                    $('<span class="badge badge-primary">'+this.settings.label+'</b></span>')
                        .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') {
                    //update the counter
                    $counter.text(sc.find('selected').length-1);
                    //and total
                    $total.text(recalculateTotal(sc)-this.data().price);

                    //remove the item from our cart
                    $('#cart-item-'+this.settings.id).remove();

                    //seat has been vacated
                    return 'available';
                } else if (this.status() == 'unavailable') {
                    //seat has been already booked
                    return 'unavailable';
                } else {
                    return this.style();
                }
            }
        });

图表已成功集成,但我无法找到与我如何限制客户座位数量相关的文档。即如果客户输入门票数量= 4,那么他应该只允许选择4个席位。

任何帮助将不胜感激。提前谢谢。

1 个答案:

答案 0 :(得分:0)

click: function () {
                if (this.status() == 'available' && selectedSeats.length < <?php echo $tickets ?>) {
                    return 'selected';
                } else if (this.status() == 'selected') {
                    return 'available';
                } else if (this.status() == 'unavailable') {
                    return 'unavailable';
                } else {
                    return this.style();
                }
            }