在2D数组中更新对象的值

路加

我在创建包含对象(“正方形”)的二维数组(称为“网格”)时遇到问题。在此简化示例中,对象仅跟踪选择(单击)正方形的次数。

我最初的网格数据看起来像它创造了这个之后...

this.grid = [   
    [{"selected":0},{"selected":0},{"selected":0}]
    ,[{"selected":0},{"selected":0},{"selected":0}]
    ,[{"selected":0},{"selected":0},{"selected":0}]  
];

目前,当单击一个正方形时,我尝试仅使用一个简单的方法就增加一个对象中的选定值this.grid[x][y].selected += 1;取而代之的是,该行中的所有值都增加,最后我得到...

[   [{"selected":0},{"selected":1},{"selected":0}]
    ,[{"selected":0},{"selected":1},{"selected":0}]
    ,[{"selected":0},{"selected":1},{"selected":0}]  ]

整行已选择增加,而不仅仅是一个对象。不是我想要的 :(

我相信问题出在网格的数组创建上,因为如果我对网格的值进行硬编码,它就会起作用。可能是什么原因导致了问题,解决方案是什么?

这是JavaScript代码...

function GridClass () {
    this.$grid = $('.grid');
    this.grid = [[]]; 

    this.createGrid = function () { // I think this is where the problem lies
        var baseSize = 3;
        this.grid = [];
        var blankYArray = [];
        for (var y = 0; y < baseSize; y++) {
            blankYArray.push({
                "selected" : 0
            });
        }
        for (var x = 0; x < baseSize; x++) {
            this.grid.push(blankYArray);
        }
    }

    this.selectSquare = function (x, y) {
        this.grid[x][y].selected += 1;
        this.drawGrid();
    }

    this.drawGrid = function () {
        var h = "", rowClass = "";
        var xLen = this.grid.length;
        var yLen = this.grid[0].length;
        for (var y = 0; y < yLen; y++) {
            for (var x = 0; x < xLen; x++) {
                var g = this.grid[x][y];
                h += '<div class="' + rowClass 
                + ' alt' + g.selected + '"'
                + ' data-x="' + x + '"'
                + ' data-y="' + y + '">'
                + x + "," + y + '</div>';
            }
            h += '<br />';
        }
        this.$grid.html(h);
    }

    this.createGrid();
    this.drawGrid();
}
grid = new GridClass();

grid.$grid.on("click", "div", function(e){ // Click event for each square
    var $thisSquare = $(this);
    var x = $thisSquare.data("x");
    var y = $thisSquare.data("y");
    grid.selectSquare(x, y);
});

HTML只是: <div id="gridFrame"><div class="grid"></div></div>

整个内容(包括CSS)都在jsfiddle上:http : //jsfiddle.net/luken/fu4yW/

用户名

Sergio所说的,每次尝试仅在循环中创建一个新数组...

for (var x = 0; x < baseSize; x++) {
        var blankYArray = [];

        for (var y = 0; y < baseSize; y++) {
            blankYArray.push({
                "selected" : 0
            });
        }

            this.grid.push(blankYArray);
        }

小提琴:http//jsfiddle.net/larsmaultsby/fu4yW/8/

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

Related 相关文章

热门标签

归档