JavaScript Math/Looping動的に行と列を作成する

Question

この小さなコードで、行と列の間にスペースを含むボックスが生成されます。

正常に動作しているようです。しかし、ボックスの高さと幅を32ピクセルに設定し、ボックスの間隔を8ピクセルに設定すると、ボックスが表示される場所にギャップが表示されます。

は、私はちょうど彼らが動作する任意の他の数字について使用している場合は、もちろん、私は私の心には、32と8に設定していた

それは私が箱を作成してかあればループしていた方法だ場合、私は疑問に思って私が理解していない基礎的な数学があります。

はここjsFiddleは、問題のコードを設定します：

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

あなたが7または9、ギャップが消えると言ってJSセクションで「間隔」を変更した場合。ギャップが現れる原因となるのは約8（または4）ですか？

ご了承ください。 :)

Answer 1

同じIDを持つ複数のボックスと、それらが同じ位置に終わるように両方のCSSが設定されている必要があります。たとえば、作成された3番目のボックスには、x位置（xはループ順に垂直）88px、y位置8pxがあります。その後、3番目の行の後半で、y = 88px、x = 8pxのボックスが表示されます。に達すると、'box' + x + y;は両方のボックスで同じになります。同じidの要素を複数持つことはできません。そのあとで何かが起こる可能性があります。

var boxid = "box"+x+y; 

へ：

簡単な解決策は、変更することです

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

あなたboxid値を割り当てられ、これが唯一で発生した時にエイリアシングがあったように見えます

Updated JSFiddle

Answer 2

スペースは8に等しい。

元々あった：

var boxid = "box"+x+y; 

だから、同じIDを持つに

変更、それを2つのボックスを持つことができます：

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