Question

我的代码从功能角度出发。我想创建一个＆＃34;绘图板＆＃34;因为它创造了一个小的“div”网格。当鼠标移过它们时会改变颜色。＆＃39; divs＆＃39;改变颜色 - 但我不明白它为什么要创建10 x 9网格而不是10 x 10网格？

＆＃13;

// 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++;
  }
}

＆＃13;

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

＆＃13;

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来清除左右浮动，即Both这个在每个X div之后添加：

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

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

        }

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

Answer 2

以下无效：

 div.sytle.float = 'clear';

请参阅使用JSFiddle解决问题：https://jsfiddle.net/cwpxy8dv/

解决方案是让所有项目保持左侧浮动，并通过为每个第十项应用清除左侧来转到下一行。

解决方案的关键部分是以下代码段：

div.style.float = 'left'; // set for all grid divs
if ( (currentDivNum-1) % gridNum == 0) { // use currentDivNum-1 since it starts at 1
  div.style.clear = 'left';  // clear to next row
}

Answer 3

您需要在代码中进行两项更改：

while (currentDivNum < maxDivs) {

和

if (currentDivNum % (gridNum+1) == 0) {

出现问题的原因是，每隔十分之一处，就会添加一个CSS代码clear:both;，这意味着它会在新的一行开始。我的改进已经将这个特征赋予了你需要的每个第11个方块。

除此之外，还必须删除最后一个（最后一行）显示的方格。这就是为什么while部分也会更新。

Answer 4

如果if的数量很大，则无需使用else和div并导致效果下降。使用以下代码并应用修复程序和性能。

$(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
    var divWidth = 25;
    var divHeight = 25;
    var container =  document.getElementById('divContainer');
    container.style.width = (divWidth * gridNum)+'px';
  
    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 = '#000';
        div.style.width = divWidth+'px';
        div.style.height = divHeight+'px';
  
        div.style.color = '#fff';
        div.innerHTML = currentDivNum;
       
        container.appendChild(div);     

        currentDivNum++;
    }
}

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

Answer 5

我做了一些更改，到目前为止我已经更改了计数器，现在从0开始。

clear不是css属性的值，它的属性本身就像：

.myclass {
 clear: left;
}

以下是工作代码：

// When the document is ready...
$(document).ready(function() {
    // create a new 10 x 10 grid
    newGrid(10); 

    $(".block").hover(function() {
        $(this).css('background-color', 'white');
    });
});

function newGrid(gridNum) {
    var maxDivs = gridNum * gridNum;

    // Current number of divs will have 100 total by default
    var currentDivNum = 0; 

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

        // set the class name of the divisions
        div.className = 'block'; 

        // Set background color
        document.body.style.backgroundColor = 'red';
        div.style.float = 'left';

        div.style.backgroundColor = '#000000';

        if ((currentDivNum % gridNum) == 0)
            div.style.clear = 'left';

        div.style.width = div.style.height = '25px';

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

        currentDivNum++;
    }
}

这是一个有效的sample

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

5 个答案: