javascript - 为什么我的程序创建的是 10x9 网格而不是 10x10 网格？

Question

我的代码从功能的 Angular 来看是有效的。我想创建一个“绘图板”，因为它创建了一个小“div”网格，当鼠标经过它们时颜色会改变。 'divs' 改变颜色 - 但我不明白为什么它创建一个 10 x 9 网格而不是 10 x 10 网格？

// When the document is ready...
$(document).ready(function() {
  // Do some things...
  newGrid(10); // create a new 10 x 10 grid
  $(".block").hover(function() {
    $(this).css('background-color', 'white');
  });
});

function newGrid(gridNum) {
  var maxDivs = gridNum * gridNum;
  var currentDivNum = 1; // Current number of divs; will have 100 total by default

  while (currentDivNum <= maxDivs) {
    // While the current div number is less than max divs...
    div = document.createElement('div');
    div.className = 'block'; // set the class name of the divisions
    document.body.style.backgroundColor = 'red';
    if (currentDivNum % gridNum == 0) { 
      div.style.float = 'clear';
      div.style.backgroundColor = '#000000';
    } else {
      div.style.float = 'left';
      div.style.backgroundColor = '#000000';
    }
    div.style.width = '25px';
    div.style.height = '25px';

    document.getElementById('divContainer').appendChild(div);

    currentDivNum++;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="divContainer"></div>

Answer 1

找到这个工作示例，只需在每个 10 之后插入一个清晰的 div:

// When the document is ready...
$(document).ready(function() {
// Do some things...
newGrid(10); // create a new 10 x 10 grid
    $(".block").hover(function() {
       $(this).css('background-color', 'white');
    });
});

function newGrid(gridNum) {

var maxDivs = gridNum * gridNum;
var currentDivNum = 1; // Current number of divs; will have 100 total by default

while (currentDivNum <= maxDivs) {
    // While the current div number is less than max divs...

    div = document.createElement('div');
    div.className = 'block'; // set the class name of the divisions
    document.body.style.backgroundColor = 'red';
  
    div.style.float = 'left';
    div.style.backgroundColor = '#000000';
  
    div.style.width = '25px';
    div.style.height = '25px';

    document.getElementById('divContainer').appendChild(div);
  
    if (currentDivNum % gridNum == 0) { 
      clearDiv = document.createElement('div');
      clearDiv.style.clear = 'both';
      
      document.getElementById('divContainer').appendChild(clearDiv);

    } 
  

    currentDivNum++;
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divContainer"></div>

解释

div.style.float = 'clear'; 无效，因为 float 不接受 clear 作为值，所以你真正需要的是输入一个 div，它清除 float左边和右边，即 Both，这是在每个 X div 之后添加的:

if (currentDivNum % gridNum == 0) { 
          clearDiv = document.createElement('div');
          clearDiv.style.clear = 'both';

          document.getElementById('divContainer').appendChild(clearDiv);

        } 

除此之外，代码以正常方式进入 div..