gpt4 book ai didi

javascript - 如何用其他 div 填充一个 div?

转载 作者:行者123 更新时间:2023-11-28 08:22:16 25 4
gpt4 key购买 nike

基本上,我正在尝试使用 jQuery 创建一个画板(这是用于 odin 元素分配)。当试图用像素 (pixel div) 填充 Canvas (wrapper div) 时,问题就出现了。它没有正确填充。这是我的 jfiddle:

http://jsfiddle.net/c3sq2jmb/2/

还有代码:

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:我知道这个程序还没有完成,但我遇到了障碍,我不知道如何解决这个问题。

最佳答案

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

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

应该是:

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

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

关于javascript - 如何用其他 div 填充一个 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28705018/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com