Question

我几天前来到这里寻求帮助，在JS / CSS中创建一个正方形网格。

一位非常乐于助人的人来到这里指导我使用两个嵌套的fors和 createElement（'div'）; 来完成工作。但是，他的例子是直接执行此操作的代码：http://jsfiddle.net/3x1kmcme/

当用户使用.click（）JQuery函数单击按钮时，我需要实际执行该操作。这不起作用，并且没有显示错误。我确实试过通过代码本身，甚至改变它，事先将其声明为变量，并逐行检查错误所在，似乎它没有进入FOR循环，我当然可能是错的，当然

也许明显我缺少的东西？

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());

$(document).ready(function () {
    "use strict";
    $("#btnstart").click(function () {
        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";
            $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
                });
            }
        }
        $canvas.html($fragment);
    });
});

Answer 1

以下fiddle

似乎工作得很好

不确定问题究竟是什么。我在HTML

中添加了以下更改

<div id="canvas"></div>

<input type='button' id='btnstart' value='Start' />

Answer 2

我弄清楚问题及其在JSFiddle上工作的原因。即使我将JavaScript文件包装在Document.Ready函数中，我仍然必须将脚本放在页面底部，就在标记下面。

Javascript没有进入函数内的FOR循环

2 个答案: