使用jquery

Question

我正在研究一个试图制作类似蚀刻草图的项目。我有一个780x780px的正方形，我试图得到一个16x16网格，使用一系列较小的方形div。

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

这是行不通的，这个项目的下一步是有一个按钮，用户可以为行/列输入任意数量的正方形，并且有一个更大或更小的平方网格 STILL ON < / strong> 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个方块的右侧。剩余的方块根据需要填写。

＆＃13;

＆＃13;

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);
  }
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

刚刚被击败了...发布这个问题，因为它回答的问题略有不同，我觉得有点清洁。我还在宽度和高度提示中添加了。

请参阅codepen 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>