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

Question

我正在做一个项目，试图制作类似于 etch-a-sketch 的东西。我有一个 780x780px 的正方形，我正在尝试使用一系列较小的正方形 div 来获得一个 16x16 的网格。

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

这是行不通的，这个项目的下一步是有一个按钮，用户可以在其中输入任意数量的行/列方格，并有一个更大或更小的方格网格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

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

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>

Answer 2

刚刚被打败了......我会发布这个，因为它回答的问题略有不同，我觉得它更干净一些。我还添加了宽度和高度提示。

见密码笔here

附带说明...使变量的名称有意义是一种很好的做法。此外，我发现将您的代码问题分解成更小更易于管理的块使它看起来不那么压倒性......一次一步:)

祝你好运！

$(document).ready(function() {
  //declare the variables at the top of  your functions...it enables us to change them later
  var columnWidthCount = 16;
  var columnHeightCount = 16;
  
  function makeBoxes() {
    //boxcount lets us set how many times we want the for loop to run...when we change the columns/rows later this variable will be updated
    var boxCount = columnWidthCount * columnHeightCount;
  //
    for (var i = 0; i < boxCount; i++) { //loop through each box
    //any code you place in here will execute each time we loop around
      $("<div class='squares'></div>").appendTo('#main');
    }
    //we only want to declare this once so we place it after the loop
    $(".squares").width((780 / columnWidthCount) - 2);
    $(".squares").height((780 / columnHeightCount) - 2);
    $('.squares').hover(
      function() {
        $(this).addClass('hover');
      }
    );
  }
  //fire the initial function
  makeBoxes();
  // fire function after click
  $('button').on("click", function() {
 
    $('div').remove('.squares');

    var squaresHigh = prompt("How many squares high? (must be a number)");
    var squaresWide = prompt("How many squares wide? (must be a number)");
   //prompt returns a string...use parseInt to turn that number string into an integer
    columnWidthCount = parseInt(squaresWide);
    columnHeightCount = parseInt(squaresHigh);

    makeBoxes();
  });
});

#main {
  height: 780px;
  width: 780px;
  background-color: antiquewhite;
  position: relative;
  font-size:0;
  white-space:nowrap;
}
.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>Go Again!</button>