Question

基本上，我正在尝试使用jQuery创建一个草图（这是用于odin项目分配）。当尝试用像素（像素div）填充画布（包装器div）时出现问题。它没有正确填满。这是我的jfiddle：

代码：

HTML：

<body>
    <div class="wrapper">

    </div>
</body>

CSS：

.wrapper {
    height: 300px;
    width: 300px;
}

.pixel {
    display: inline-block;
    background-color: black;
    margin:0;
    vertical-align: top;
    float:left;
}

JS / jQuery的：

    $(document).ready(function(){
    createGrid(16);
});


function createGrid(number) {
    for(var i = 0;i <= number*number;i++) {
        $('.wrapper').append('<div class="pixel"></div>'); //adds pixels based on user command, default 16
    }
    $('.pixel').height($('.wrapper').height()/number); //adjusts the size of the pixels so that they fit the wrapper perfectly regardless of amount
    $('.pixel').width($('.wrapper').width()/number);
}

$('.pixel').hover(
    function() {
        $(this).css('background-color', 'white');
    }
);

另外，作为第二个问题：在jfiddle上，悬停功能有效，但在Chrome中尝试时，当鼠标悬停在像素上时，像素不会变白。知道为什么吗？

PS：我知道该程序目前还没有完成，但我遇到了障碍，我不知道如何解决这个问题。

Answer 1

这是工作DEMO：

我已经更正了循环和每个像素大小的分配。

for (var i = 0; i < number * number; i++) {
  $('.wrapper').append('<div class="pixel"></div>');
}
...
$('.pixel').each(function () {
    $(this).height(height);
    $(this).width(width);
});

对于Chrome的问题，您需要在文档就绪块中定义您的方法：

$(document).ready(function () {
  createGrid(16);

  $('.pixel').hover( function() {
    $(this).css('background-color', 'white');
  });
});

Answer 2

一个问题是你有一个错误。

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

应该是：

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

除此之外，它似乎对我有用。

Answer 3

你尝试渲染300px / 16，结果是18.75px（不是全像素值）。浏览器无法正确呈现它，并且您在悬停时看到黑色碎片。使用15格，它可以完美地工作（300/15 = 20px盒子）。要在最后处理额外的黑匣子，请尝试：

for(var i = 0;i < number*number;i++)

更新了Fiddle

如何用其他div填充div？

3 个答案: