Question

我想为已知数量的div生成属性，但我可以弄清楚我哪里出错了。我现在尝试的是：

$(document).ready(function(){
   for(var i=1; i<=7; i++)
   {
    var randBottom = Math.ceil(Math.random()*200); 
    var randHeight = Math.ceil(Math.random()*300)+200-randBottom;
    var randWidth = Math.ceil(Math.random()*50)+20;
    var oceanWidth= $("#ocean").css(["width"]);
    var randLeft= Math.ceil(Math.random()*oceanWidth)-randWidth;
     var cssObj = {
        'bottom' : randBottom+'px',
         'height' : randHeight+'px',
         'widht' : randWidth+'px
        };
    $("#bubble"+i).css(cssObj);
   }
});

Here是一份完整的在制品样本。

Answer 1

您的代码中存在一些错误。

$(document).ready(function(){
   for(var i=1; i<=7; i++)
   {
    var randBottom = Math.ceil(Math.random()*200); 
    var randHeight = Math.ceil(Math.random()*300)+200-randBottom;
    var randWidth = Math.ceil(Math.random()*50)+20;
    var oceanWidth= $("#ocean").css(["width"]);
    var randLeft= Math.ceil(Math.random()*oceanWidth)-randWidth;
     var cssObj = {
        'bottom' : randBottom+'px',
         'height' : randHeight+'px',
         'width' : randWidth+'px'
        };
    $("#bubble"+i).css(cssObj);
   }
});

Answer 2

你忘了'在css对象的最后一个元素的末尾。

var cssObj = 
{
    'bottom' : randBottom + 'px',
    'height' : randHeight + 'px',
    'widht' : randWidth + 'px'
};

Answer 3

代码存在一些问题：

使用width方法获取元素的大小，使用css(["width"])不会将宽度作为数字给出，它为您提供了一个名为width的属性的对象这是一个宽度和单位的字符串，例如{ width: '420px' }。
您忘记包含left。
指定top和left，而不是bottom和left。（您可能需要更改计算。）
您将'width'拼错为'widht'。
您可能希望在乘以随机数之前减去元素的宽度以计算左侧位置，否则您将获得负值。

这至少会将元素放在某处：

for(var i=1; i<=7; i++)
   {
    var randBottom = Math.ceil(Math.random()*200); 
    var randHeight = Math.ceil(Math.random()*300)+200-randBottom;
    var randWidth = Math.ceil(Math.random()*50)+20;
    var oceanWidth= $("#ocean").width();
    var randLeft= Math.ceil(Math.random()*(oceanWidth-randWidth));
     var cssObj = {
        'left': randLeft + 'px',
        'top' : randBottom+'px',
         'height' : randHeight+'px',
         'width' : randWidth+'px'
        };
       console.log(cssObj);
    $("#bubble"+i).css(cssObj);
   }

如何使用JQuery将随机值放入css属性？

3 个答案: