制作飞机座位表

时间:2015-01-11 10:24:23

标签: javascript jquery html css

我试图使用飞机座位图生成器。它的作用非常简单。您在html输入上插入乘客的第一,商业和经济。并自动显示图表。这项工作是通过javascript执行的。我试图运行它,但出了点问题。它只是不起作用。它显示了您应该在其中放置输入和数字7的表。我想这是因为我错过了一些javascript。填写输入时没有任何反应。

为了方便我将代码放在jsfiddle上。 http://jsfiddle.net/g4kzo4fo/

因为我必须在这里粘贴代码,所以你有我的javascript。我认为问题出在这里:

makeRequest(request, id, false);

    $('#'+id).dialog({ width: 'auto', height: 'auto', modal: true, resizable: false });
    $('#'+id).dialog('open');
}

var AircraftConfigCheck = {
    capacity :  200,
    business :  0,
    economy:    0,
    first:      0,
    businessFree : 0,
    economyFree : 0,
    firstFree: 0,

    total : function() {
        return (parseInt(this.business) || 0) * 2 + (parseInt(this.economy) || 0) + (parseInt(this.first) || 0) * 4;
    },

    checkBusiness : function() {
        if( this.total() > this.capacity ) {
            this.business = Math.floor( ( this.capacity - this.economy - this.first * 4 ) / 2 );
        }
    },

    checkEconomy : function() {
        if( this.total() > this.capacity ) {
            this.economy = this.capacity - this.business * 2 - this.first * 4;
        }
    },

    checkFirst : function() {
        if( this.total() > this.capacity ) {
            this.first = Math.floor( ( this.capacity - this.economy - this.business * 2 ) / 4 );
        }
    },

    updateCapacity : function() {
        this.businessFree = Math.max( 0, Math.floor( ( this.capacity - this.total() ) / 2 ) );
        this.firstFree = Math.max( 0, Math.floor( ( this.capacity - this.total() ) / 4 ) );
        this.economyFree = Math.max( 0, this.capacity - this.total() );
    },

    setValues : function() {
        $("#business").val( this.business ); 
        $("#economy").val( this.economy ); 
        $("#first").val( this.first ); 
        $("#businessFree").html( this.businessFree ); 
        $("#economyFree").html( this.economyFree ); 
        $("#firstFree").html( this.firstFree ); 
        /*$("#first").val( this.total() ); */
        this.render();
    },

    render : function() {
        makeRequest('http://www.fsairlines.net/crewcenter/aircraft_config_ajax.php5?max_pax='+this.capacity+
            '&first_seats='+this.first+
            '&business_seats='+this.business+
            '&economy_seats='+this.economy,
            'aircraft',
            true
        );
    }
 }

$(function() {
    $(".seatInput").keyup(function() {
        switch( $(this).attr("id") ) {
            case "economy": 
                AircraftConfigCheck.economy = $("#economy").val();
                AircraftConfigCheck.checkEconomy();
                AircraftConfigCheck.updateCapacity();
                AircraftConfigCheck.setValues();
                break;

            case "business":
                AircraftConfigCheck.business = $("#business").val();
                AircraftConfigCheck.checkBusiness();
                AircraftConfigCheck.updateCapacity();
                AircraftConfigCheck.setValues();
                break;

            case "first":
                AircraftConfigCheck.first = $("#first").val();
                AircraftConfigCheck.checkFirst();
                AircraftConfigCheck.updateCapacity();
                AircraftConfigCheck.setValues();
                break;
        }
    });
});

提前致谢!

最新更新: http://jsfiddle.net/g4kzo4fo/4/

1 个答案:

答案 0 :(得分:2)

您的代码中存在相当多的语法错误,这就是它无法运行的原因。

这部分代码没有任何意义:

makeRequest(request, id, false);

    $('#'+id).dialog({ width: 'auto', height: 'auto', modal: true, resizable: false });
    $('#'+id).dialog('open');
}

makeRequest()功能不存在,因此您无法调用它。并且,在此块的末尾有一个无关的}

然后,稍后在渲染功能中,您尝试再次调用makeRequest(),但它不存在。


在运行您刚刚编写的任何Javascript代码时,您应该做的第一件事是检查浏览器中的错误控制台或调试控制台是否有错误。然后,只要有什么东西不能正常工作,请再次检查控制台。然后,当您重新测试代码时,请再次检查错误控制台。