Question

好吧所以我的目的是制作一个按钮，创建一个弹出窗口，询问你想要调整网格大小的数量，一旦用户输入了数字，网格应该在相同的总空间中生成之前（应该是960px），我有网格调整大小，但它不会像以前一样保留在相同的总空间中，如果你添加太多的方块，它似乎完全吓坏了，这里是链接 - {{3}到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可能会给你一个打破网格大小的舍入值

我不确定我的问题是否正确，请告诉我，如果我错过了什么

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

1 个答案: