Question

我希望通过使用jQuery动态设置每个div网格的宽度和高度来构建一个草图板。

然而，结果显示高度和宽度的不同大小。从JQuery代码中，我了解到我已经成功创建了16 * 16 div块。然后我使用selector.css(width:function(){})为它指定高度和宽度。

结果，我期待看到一个16 * 16网格的大小相同的网格。但是，它显示不同大小的块。我不知道为什么会这样，有人能开导我吗？

＆＃13;

var input = 16;


$(document).ready(function(){

	
    for(var i = 0; i<input*input;i++){
	$('.wrapper').append("<div></div>");
   }

	$('.wrapper').find('div').css({
    width: function(input) {
      return 200/input;
    },
    height: function(input) {
     return 200/input;
    }
  });
	$('.wrapper').find('div').addClass('grid');
	$('.wrapper').find('div').on('mouseenter',function(){
	$(this).addClass('highlight');

});

});

＆＃13;

.wrapper{
	width: 900px;
	height: 900px;
	margin: 0 auto;

}

.grid{
	border: 1px solid black;
	display: inline-block;
	margin: 2px 2px;
}

.highlight{
	background-color: blue;

}

#button{
	width: 900px;
	margin: 0 auto;
}

button{
	display: block;
	margin: auto;
}

body{
	background-color: grey;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	<link rel="stylesheet" type="text/css" href="style.css">
	<script type="text/javascript" src = "sketchpad.js"></script>



	<div class="wrapper"></div>

＆＃13;

Answer 1

  $('.wrapper').find('div').width(200/input);
  $('.wrapper').find('div').height(200/input);

  /*$('.wrapper').find('div').css({
    width: function(input) {
      return 200/input;
    },
    height: function(input) {
     return 200/input;
    }
  });*/

reomve注释代码部分并添加上面的代码部分。

Answer 2

$('.wrapper').find('div').css({
    width: function(input) {
      return 200/input;
    },
    height: function(input) {
     return 200/input;
    }
  });

我想你只是忘了放宽度和高度单位。

$('.wrapper').find('div').css({
        width: function(input) {
          return 200/input + 'px';
        },
        height: function(input) {
         return 200/input + 'px';
        }
      });

应该工作

Answer 3

问题在于您指定的width功能：

width: function(input) { return 200/input; },

根据documentation这个功能：

接收集合中的元素和旧元素的索引位置宽度作为参数。

因此参数input包含div的索引位置，例如0，1，2等。这就是为什么你会看到不可见的块（位置0），高度/宽度为200（位置1）等。

解决方案是使用变量而不是函数来设置宽度：

var block_width = 200 / input; 

$('.wrapper').find('div').css({
    width: block_width,
    height: block_width
});

为什么我不能通过使用jQuery设置相同的高度和宽度？

3 个答案: