javascript - jQuery：在正文上附加计算的 div

Question

我正在根据窗口计算一个盒子的宽度和高度，height并将width其除以 12 以获得 12 个相同大小的盒子。

我创建了这个脚本来在点击时在正文上附加框-

$('body').append('<div class="box"></div>');
        $('.box').css('display','block');

这就是我如何计算这个盒子的宽度-

var width=$(window).width();
var span12= width/12;

而对于身高-

 var height=$(window).height();
    var spanheight=height/12;

我想在点击事件上附加所有可能的框。那可能吗？

小提琴

Answer 1

box每次创建新的时都需要定义 css 属性<div>，
因为$('.box').css('display','block');只会对已加载的内容产生影响。

http://jsfiddle.net/Em23e/8/

Answer 2

你可以这样尝试：

http://jsfiddle.net/Em23e/12/

它使用循环来显示 12 个框，或者如果您再次将它与 Number 相乘，它将在屏幕上显示所有可能的框。

您计算中的主要问题是您没有考虑每个框周围的 3px。

margin: 3px;

Answer 3

下面是一些工作 JavaScript 代码来替换您发布的 JavaScript。此代码循环遍历 body 的高度和宽度，并在整个可见区域创建 div 瓦片。

这是小提琴：http: //jsfiddle.net/yUqXs/5/

$(function(){
var winwidth = $(window).width();
var width=winwidth;
var span12= width/12;
var winheight = $(window).height();
var height=winheight;
var spanheight=height/12;

$('.button').click(function(){
    var $body = $('body');
    var totalw = 0;
    var totalh = 0;
    var totalw2 = span12;
    var totalh2 = spanheight;

    while (totalh2 < winheight)
    {
        totalw = 0;
        totalw2 = span12;
        while (totalw2 < winwidth)
        {
            $body.append('<div class="box" style="display: block; background: green; width: '+span12+'px; height: '+spanheight+'px; float: left; position: absolute; top: '+totalh+'px; left: '+totalw+'px;">&nbsp;</div>');
            totalw += span12;
            totalw2 += span12;
        }
        totalh += spanheight;
        totalh2 += spanheight;
    }
});
});

Answer 4

尝试使用这个

$(function(){

var width=$(window).width();
var span12= width/12;
var height=$(window).height();
var spanheight=height/12;

$('.button').click(function(){
$('body').append('<div class="box"></div>');
    $('.box').css('display','block');
    $('.box').css("height",spanheight);
    $('.box').css("width",span12);
    $('.box').css("background","green");
    $('.box').css("margin","10px");
});
});

在您的情况下发生的情况是您的 div 附加到正文，但是它的高度和宽度为“0”，因此您必须在点击功能上设置它。

Answer 5

不确定，但可能你想要这个，更新你的代码。

css properties每次添加框时都需要更新。检查这个小提琴