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