Question

我想创建一个正方形网格。为此，我制作了一个二维数组，它会在某个位置产生一个 div （应该是它的位置乘以4px，因为那是每个方块的大小）我不知道因为我的浏览器显示没有错误，我做错了什么。我知道有些事情是错误的，因为当我激活此功能时没有打印出来。为了清楚起见，我已经为'alive'和' dead'类的元素分配了CSS属性，并添加了'canvas' id在页面的末尾，所以我假设错误在于divs本身的创建。在制作网格时，甚至在正确的练习中反复创建div？我离题了。谢谢你的时间。

$(document).ready(function () {
    "use strict";
    $("#btnstart").click(function () {
        for (i = 0; i < xclength; i++) {
            for (j = 0; j < yclength; j++) {
                if (xycoords[i][j] === 1) { //if cell is alive
                    jQuery('<div/>', {
                        className: 'alive',
                        id: "x" + j + "y" + i,
                        css: {
                            position: "absolute",
                            top: (i * 4) + "px",
                            left: (j * 4) + "px"
                        }
                    }).appendTo('#canvas');
                } else { //if cell is dead
                    jQuery('<div/>', {
                        className: 'dead',
                        id: "x" + j + "y" + i,
                        css: {
                            position: "absolute",
                            top: (i * 4) + "px",
                            left: (j * 4) + "px"
                        }
                    }).appendTo('#canvas');
                }
            }
        }
    });
});

Answer 1

这是一种用div标签制作网格的方法。这里的实例：http://jsfiddle.net/3x1kmcme/

var rows = 8,
    cells = 8,
    count = 0;

var i, j,
    top = 0,
    left = 0;

var boxWidth = 50,
    boxHeight = 50;

var $canvas = $('#canvas');
var $fragment = $(document.createDocumentFragment());

function addBox(opts) {
  var div = document.createElement('div');
  div.id = opts.id;
  div.className = 'alive';
  div.style.top = opts.top + "px";
  div.style.left = opts.left + "px";

  div.innerHTML = '<p>' + opts.count + '</p>';
  $fragment.append(div);
}

for (j = 0; j < rows; j += 1) {
  top = j * boxHeight;

  for (i = 0; i < cells; i += 1) {
    count += 1;

    addBox({
        count: count,

        id: 'item' + i,
        top: top,
        left: i * boxWidth
    });
  }
}

// Append all
$canvas.html($fragment);

尝试使用Javascript和CSS绘制网格元素

1 个答案: