JavaScript 数学/循环动态创建行和列

Question

所以，我有一小段代码可以生成行和列的盒子，它们之间有空格。

它似乎工作正常；然而，当我将框的高度和宽度设置为 32 像素并将它们之间的空间设置为 8 像素时，在框应该出现的位置开始出现间隙。

如果我使用任何其他数字，它们都有效，但当然我的想法是 32 和 8。

我想知道这是否是我循环创建框的方法，或者是否存在一些我不理解的基础数学。

这是一个用相关代码设置的 jsFiddle:

http://jsfiddle.net/dondon/zMnuK/

如果您将 JS 部分中的“间距”修改为 7 或 9，间距就会消失。导致间隙出现的 8(或 4)是什么？

欢迎任何意见! :)

Answer 1

它与具有相同 id 的多个框有关，并且在它们上都设置了 css，以便它们最终位于完全相同的位置。例如，创建的第三个框的 x 位置(x 与您的循环顺序垂直)88px，y 位置 8px。然后在第三行的后面有一个 y = 88px 和 x = 8px 的框。达到了，所以 'box' + x + y; 对于这两个盒子是相同的。您不能有多个具有相同 id 的元素，因此之后任何事情都可能发生。

简单的解决方案是更改:

var boxid = "box"+x+y;

收件人:

var boxid = "box"+x+'_'+y;

Updated JSFiddle