Odin项目蚀刻草图-调整网格大小

Question

好的，所以我的意图是制作一个按钮，该按钮会创建一个弹出窗口，询问您要调整网格大小的多少个正方形，一旦用户输入了数字，网格应该在与以前相同的总空间中生成（应该是960像素），我已经调整了网格的大小，但是它并没有像以前一样保留在总空间中，如果您添加了太多的正方形，似乎完全吓坏了，这是链接-https://codepen.io / codeChimp88 / pen / zzMrjx到Codepen，如果您需要更多信息，请告知我，希望我提供任何指向该信息的指针，也欢迎提出任何批评和建议，我欢迎您（我是初学者），代码如下！

html-

<h1>Etch a Sketch Pad</h1>

<div class="cont">
<button class="but">Clear Pad</button>
  <button class="but" id="resize">Resize</button>
</div>  

<div class="container">
</div>

CSS-

.squares {
  background-color: black;
  border: solid 1px black;
  display: inline-block;
  width: 20px;
  height: 20px;

  color: transparent;
}

.black {
  background-color: black;
}

.container {
  text-align: center;
  border: solid 20px red;
  background-color: red;
  height: 100%;
  width: 100%;


}

h1 {
  text-align: center;
  font-size: 50px;


}

.but {
  width: 100px;
  height: 100px;
  cursor: pointer;
  background-color: red;
  font-size: 20px;
  margin: 10px;
  border-radius: 10px;

}

.cont {
  text-align: center;
  margin: 20px;

}

jQuery-

$(document).ready(function () {

    var $grid = $('.container');

for (i = 0; i < 16; i++) 
{
    var row = '<div>';

    for (j = 0; j < 16; j++)
        row += '<div class="squares">' + j + '</div>';

    row += '</div>';

    $grid.append(row);
}

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

  $('.but').click(function() {
    $('.squares').css("background-color", "black");
  });

  $('#resize').click(function() {
    $('.squares').remove();
    $('.container').append('<table></table>');
    var gridsize = prompt('How big would you like to make the grid?');


    var $grid = $('.container');

for (i = 0; i < gridsize; i++) 
{
    var row = '<div>';

    for (j = 0; j < gridsize; j++)
        row += '<div class="squares">' + j + '</div>';

    row += '</div>';


    $('.squares').width(960/gridsize);
    $('.squares').height(960/gridsize);

    $grid.append(row);

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

}

  });




});

Answer 1

首先，

  # Here, you are resizing every squares that already exists on the DOM.  
  #Problem : at this time, you did not appended your row yet, so that $('.squares') does not take into account the .squares existing in your row.
  $('.squares').width(960/gridsize);
  $('.squares').height(960/gridsize);

  $grid.append(row);

为了获得更好的性能，我建议您在for循环之外调整.squares元素的大小。 您将获得一个简单的150x150网格的许多秒

$('#resize').click(function() {
  $('.squares').remove();
  $('.container').append('<table></table>'); // Actually you don't use that
  var gridsize = prompt('How big would you like to make the grid?');


  var $grid = $('.container');

  for (i = 0; i < gridsize; i++) 
  {
  var row = '<div>';

  for (j = 0; j < gridsize; j++)
    row += '<div class="squares">' + j + '</div>';

  row += '</div>';

  $grid.append(row);

  }

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

  $('.squares').width(960/gridsize);
  $('.squares').height(960/gridsize);  
});

这应该可以解决您的最后一行问题。

其次，当网格元素太小时，您的行高就会成为问题。

.container div{
  line-height: 0
}

这应该解决您的行间距问题。

最后，网格比您想要的要大的事实与两件事有关：正方形上有一个边框，该边框增加了.squares元素的宽度，您在调整大小时无需考虑您的元素以及960/gridsize肯定会为您提供一个四舍五入的值，这会破坏您的网格大小

我不确定我是否正确解决了您的问题，所以请告诉我是否错过了一些事情