Question

我的意思是使用for loop创建的div。有这样一个函数创建的“table”div，以及从另一个函数创建的“chair”div。所有表格都有id个元素，所有主席都有class个元素。表格div的数量是不固定的，但是主席号码应该始终是表格数量的6倍;桌子顶部和底部每桌有6把椅子。

此代码创建表。

for (var i = 0; i < defaultSettings.numberofTables; i++) {
        newTable = $('<div id="table' + i + '"></div').css({
            'width': defaultSettings.tableSize.tableW + '%',
            'height': defaultSettings.tableSize.tableH + '%',
            'background-color': 'black'
        });
        tableProp = {
            'left': defaultSettings.tablePos.posX,
            'top': defaultSettings.tablePos.posY,
            'position': 'absolute',
            'display': 'none'
        };
            defaultSettings.tablePos.posX += 200;
        newTable.css(tableProp).appendTo('body').fadeIn(defaultSettings.speed);
        availableTables.push(newTable);
    }
    return availableTables;
}

我应该将chair数组拆分为包含六个的块，以使用它们的类元素将每个数组聚类到一个表。所以我做了前者。

我的问题是：如何使用Javascript / JQuery CSS将每个拆分数组放在表div周围？这应该是动态的，所以我没有必要为每个新表做，但我在这里问，因为我根本不知道如何。任何指针/帮助？

在这个fiddle中，有5张桌子和30把椅子。

Answer 1

我将桌子和椅子分组。标记了可用的表格..

    <button id="check">Check</button>


    <script>

        $( document ).ready(function() {
    makeFloorPlan();

    function makeFloorPlan() {
        var defaultSettings = {
                numberofTables: 5, //5 tables 
                tablePos: {
                        posX: 100,
                        posY: 100
                },
                tableSize: {
                        tableW: 10,
                        tableH: 12
                },
                takenTables: [2, 4], //
                numberofChairs: 30,
                chairPos: {
                        posX: 20,
                        posY: 80
                },
                chairSize: {
                        chairW: 1,
                        chairH: 2
                },
                speed: 1000 // tables fade in
        };

        function createAvailTables() {
    var availableTables = [],
        newTable, tableProp;
    for (var i = 0; i < defaultSettings.numberofTables; i++) {
        newTable = $('<div id="table' + i + '"></div').css({
            'width': defaultSettings.tableSize.tableW + '%',
            'height': defaultSettings.tableSize.tableH + '%',
            'background-color': 'black'
        });
        tableProp = {
            'left': defaultSettings.tablePos.posX,
            'top': defaultSettings.tablePos.posY,
            'position': 'absolute',
            'display': 'none'
        };

                    //create chairs for the table

                        var availableChairs = [],
                        newChair, chairProp;
                        var horPosArr = new Array(0, 50, 100);
                        var chairPosX, chairPosY; 
                        for (var j = 0; j < 6; j++) {                             

                            if(j<3) {
                                chairPosX = defaultSettings.tablePos.posX + horPosArr[j];
                                chairPosY = defaultSettings.tablePos.posY - 20;
                                //console.log("chair" + chairPosX + "," + chairPosY);                                    
                            }
                            else {
                                chairPosX = defaultSettings.tablePos.posX + horPosArr[j-3];
                                chairPosY = defaultSettings.tablePos.posY + 100;
                                //console.log("chair" + chairPosX + "," + chairPosY);                                    
                            }                                
                                newChair = $('<div class="table' + i + 'chair' + j + '"></div').css({
                                        'width': defaultSettings.chairSize.chairW + '%',
                                        'height': defaultSettings.chairSize.chairH + '%',
                                        'background-color': 'green'
                                });
                                chairProp = {
                                        'left': chairPosX,
                                        'top': chairPosY,
                                        'position': 'absolute',
                                        'display': 'none'
                                };

                                newChair.css(chairProp).appendTo('body').fadeIn(defaultSettings.speed);
                                availableChairs.push(newChair);
                        }


        if (defaultSettings.tablePos.posX >= 400) {
            defaultSettings.tablePos.posX = 100;
            defaultSettings.tablePos.posY += 200;
        } else {
            defaultSettings.tablePos.posX += 200;
        }                        

        newTable.css(tableProp).appendTo('body').fadeIn(defaultSettings.speed);
        availableTables.push(newTable);

    }
            //console.log(availableTables);
    return availableTables;                
        }

        var availableTables = createAvailTables();

        $("#check").click(function() {
                for (var i = 0; i < defaultSettings.takenTables.length; i++) {
                    console.log(defaultSettings.takenTables[i]);
                    $("#table"+defaultSettings.takenTables[i] ).fadeTo( defaultSettings.speed, 0.33 );
                }
        });


        }

将生成的div分组到其他生成的div

1 个答案: