需要幫助瞭解這個網格如何工作

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的「寬度」更難以記住一個完美的正方形，它可以重複用於寬度和高度。

希望這會有所幫助！ :)