javascript - 制作飞机座位图

Question

我正在尝试使用飞机座位图生成器。它的作用非常简单。您在 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/

Answer 1

你的代码中有很多语法错误，这就是它没有运行的原因。

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

makeRequest(request, id, false);

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

makeRequest() 函数不存在，因此您无法调用它。并且，在此 block 的末尾有一个无关的 }。

然后，稍后在渲染函数中，您尝试再次调用 makeRequest()，但它不存在。

---

运行您刚刚编写的任何 Javascript 代码时，您应该做的第一件事是检查浏览器中的错误控制台或调试控制台是否有错误。然后，任何时候如果某些东西不能正常工作，请再次检查控制台。然后，当您测试代码时，再次检查错误控制台。