需要帮助了解这个网格如何工作

Question

在for循环中，您有一个“x”循环和一个“y”循环。我不明白你为什么需要这两个工作？为什么没有一个循环只是在“容器”满之前继续添加“方块”？

#JQUERY 
function makeGrid() { 
    for (var x = 0; x < numberSquares; x++) { 
     for (var y = 0; y < numberSquares; y++) { 
      $("<div class='square'></div>").appendTo('.container'); 
     } 
    } 
    $('.square').css({'width': squareSize, 'height': squareSize}); 
} 

Answer 1

虽然这可能在你上面的例子中一个循环来完成，我相信主要原因，它是在两个循环做这里是适应性。考虑一个用例，其中网格不是一个完美的正方形。您可以轻松地在两个循环中替换numberSquares，以获得分别定义宽度和高度的变量。对于这种情况，您还分别定义了x和y！

作为中学的原因，我会说，使用两个循环提供更大的清晰度。如果这是一个单一的循环，你需要自己记住总数个数。例如，如果您有一个13x13的网格，则numSquares需要为169--要比13的“宽度”更难以记住一个完美的正方形，它可以重复用于宽度和高度。

希望这会有所帮助！ :)