Question

我正在尝试使用javascript循环将图像随机放入div中。我一直遇到麻烦。

这是我的（简化）：

for(var i = 0; i < 10; i++)
{
var top = random(-20, 20);
var left = random(-20, 20);

document.write(
  <div class="one" style="\"left:" + left + ";\"">
    <img src="hein.png"/>
  </div>
);
}

目标是生成一些顶部和左侧值，并且每次尝试都会显示包含这些生成值的新图像。我知道这是style =“”的语法错误。但我尝试过的任何事情都没有效果

我怎样才能使这个工作。

Answer 1

您需要将整个document.write输出包装在引号中，如下所示：

document.write('<div class="one" style="left:"' + left + ';"><img src="hein.png"/></div>');

Answer 2

您应该首先考虑使用像jQuery这样的JavaScript库。这将简化您的工作。

假设你有这个标记

<div id="image-container">

</div>

在标记中包含jQuery

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>

从JavaScript开始，在标记中包含jQuery之后，你会这样做

for(var i = 0; i < 10; i++) {
    var top = random(-20, 20);
    var left = random(-20, 20);

    $('#image-container').append('<img src="hein.png" style="position: absolute; top: '+top+'; left : '+left +';" />');
}

Answer 3

你忘记了document.write中的引号，而你正在逃避错误的字符

document.write(
  "<div class=\"one\" style=\"left:" + left + ";\">
    <img src=\"hein.png\"/>
  </div>"
);

Answer 4

您忘记在document.write来电中引用该字符串。你也忘了测量单位了。

for(var i = 0; i < 10; i++) {
   var top = random(-20, 20);
   var left = random(-20, 20);

   document.write(
      '<div class="one" style="left:' + left + 'px;top:' + top + 'px">' +
         '<img src="hein.png"/>' +
      '</div>'
   );
}

Answer 5

使用PHP代替：

<?php
// Middle coords of my div
    $top = 200;
    $left = 350;

    for($i = 0; $i < 20; $i += 1)
    {
        $tran = rand(-130,170);
        $lran = rand(-300,270);
        // Fix line breaks 
        $top = $top - 49;
        echo '<div style="position:relative;
                  display: block;
                  height: 49px;
                  width:49px;
                  left:' . ($left + $lran) . 'px;
                  top:' . ($top + $tran) . 'px;
               ">' . '<img src="img.png"/>' . '</div>';
    }

?>

真棒！感谢您提供字符串语法的帮助！

使用Javascript Vars设计Div

5 个答案: