Question

我正在研究The Odin Project课程中的jQuery项目。我设法在一个容器内创建一个网格，改变它的盒子的颜色，但我希望能够增加盒子的数量，而不会弹出容器。我想我可以管理如果我用jQuery覆盖框的css属性，但无法弄清楚它为什么不起作用。

这是我的代码：

$(document).ready(function grid(boxes)
{
//Declare how many boxes in the grid.
  var boxes = prompt("Choose gridsize");

//Resize boxes assigning css.
  var rcsize = Math.floor(400/boxes - 3);
   $('.row').css('width: ' + rcsize + 'px');
   $('.row').css('height: ' + rcsize + 'px');

//Create grid.
  var $row = $('<div class="row"></div>');
  var $col = $('<div class="col"></div>');
      for (var i = 0; i < boxes; i++) {
          $row.append($col.clone());
      }
      for (var i = 0; i < boxes; i++) {
          $("#outerbox").append($row.clone());
    }
    $('.col').on('hover', function() {
     $(this).addClass('colon');
  });

//Add functionality to navbar buttons.
   $("#g").click(function() {
      prompt("Choose gridsize");
   });

   $("#r").click(function() {
      alert("sup");
   });

   $("#c").click(function() {
     prompt("Choose color: black, red or blue");
   });
});

这是我的CSS：

.body {
  width: 100%;
  height: 100%;
  background-color: #a79696;
  position: absolute;
  margin: 0 0 0 0;
  overflow-x: hidden;
}

.titlelogo {
  background-color: #e38f52;
  height: 25px;
  width: 100%;
  padding: 30px 0 30px 0;
}

#logo {
  margin: 0 0 0 0;
  width: 30%;
  font-size: 20px;
}

#navbar0 {
  margin-top: 0;
  padding: 0;
  background-color: #483f47;
}

.navbar1 {
  display: inline;
  text-decoration-color: white;
}

button {
  margin-left: 45px;
  margin-right: 45px;
  background-color: #ffffff80;
}

#outerbox {
  width: 400px;
  height: 400px;
  margin: 50px;
  border-radius: 10px;
  background-color: #e38f52;
  padding: 12px 0px 0px 12px;
}

.row {
    display: inline-block;
    float: left;
    padding: 1px;
}

.col {
    height: 22px;
    width: 22px;
    margin: 0px;
    outline: 1px solid;
    outline-color: #000;
    float: left;
    background: #e38f52;
    display: inline-block;
    padding: 1px;
}

.colon {
  background: #000;
}

悬停不适用于jsfiddle但由于某种原因它可以在我的索引文件上运行。先感谢您。 jsfiddle

Answer 1

使用css函数如下

upload(req, res, err => {

如需参考，请查看此链接http://api.jquery.com/css/

Answer 2

你在$('.row').css('width' , rcsize + 'px'); $('.row').css('height' , rcsize + 'px');中输错了。就在这里

class

应该是

//create grid
var $row = $('<div clas="row"></div>');

无法用jQuery覆盖CSS属性，我的代码出了什么问题？

2 个答案: