javascript - 使用 jquery 创建自定义方形网格

Question

我正在进行一个元素，试图制作类似于 eclipse 刻素描的东西。我有一个 780x780px 的正方形，我正在尝试使用一系列较小的正方形 div 来获得 16x16 的网格。

在这个网格上我有悬停效果。我不断得到一个 15x17 的正方形 div 网格，因为该行的最后一个正方形放不下。我将边距设置为 1px，将填充设置为 0，所以我认为要在 780px 宽的行上放置 16 个正方形，这需要我考虑边距(15 1px 边距)，然后我可以从那里划分(780-15 ) 乘以 16，即我想要的方 block 数。

那是行不通的，这个元素的下一步是有一个按钮，用户可以在其中为行/列输入任意数量的方 block ，并有更大或更小的方格网格STILL ON 780x780 正方形。有人有什么想法吗？我很困惑。

$(document).ready(function() {
  var original = 16;
  for (var y = 0; y < original * original; y++) {
    $(".squares").width((780 - 15) / original);
    $(".squares").height((780 - 17) / original);
    $("<div class='squares'></div>").appendTo('#main');
  }
  $('.squares').hover(
    function() {
      $(this).addClass('hover');
    }
  )

});

function gridq() {
  $('.squares').removeClass('hover');
  $('div').remove('.squares');

  var newgrid = prompt("How many squares on each side?");
  var widthscreen = 192;

  if (newgrid > 0) {
    for (var x = 0; x < newgrid * newgrid; x++) {
      $(".squares").width(widthscreen / newgrid);
      $(".squares").height(widthscreen / newgrid);
      $("<div class='squares'></div>").appendTo('#main');
    }
    $('.squares').hover(
      function() {
        $(this).addClass('hover');
      }
    )
  }
}

#main {
  height: 780px;
  width: 780px;
  background-color: antiquewhite;
  position: relative;
}
.squares {
  margin: 1px;
  padding: 0;
  background-color: aquamarine;
  display: inline-block;
  float: left;
}
.hover {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id=main>
</div>
<button onclick="gridq()">Go Again!</button>

Answer 1

试试这个片段？网格初始化在 grid() 函数中设置，然后在必要时稍后调用。宽度动态设置为第 16 个方 block 的右侧。其余方 block 根据需要填充。

var wide = (780 - 15) / 16,
  tall = (780 - 17) / 16; // set the square dimensions. this can be incorporated into the grid() function with 16 replaced by 'original'

function grid(x, y) {
  var original = x,
    y = y;
  $("#main").empty(); // empty and restart
  $("#main").width(wide * (original + 1));

  for (var i = 0; i < original * y; i++) {

    $("<div class='squares'></div>").appendTo('#main');
  }

  var square = $(".squares");
  square.width(wide);
  square.height(tall);

  var side = square.eq(original - 1).position().left + square.width() + 2; // tighten the #main width
  $("#main").width(side);

  $('.squares').hover(
    function() {
      $(this).addClass('hover');
    }
  )
}

grid(16, 16); // starting dimension

function gridq() {
  $('.squares').removeClass('hover');
  $('div').remove('.squares');

  var newgrid = prompt("How many squares on each side?");
  var widthscreen = 192;

  if (newgrid > 0) {
    grid(newgrid, newgrid);
  }
}

#main {
  background-color: antiquewhite;
  position: relative;
}
.squares {
  margin: 1px;
  padding: 0;
  background-color: aquamarine;
  display: inline-block;
  float: left;
}
.hover {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id='main'>
</div>
<button onclick="gridq()">Go Again!</button>