Стилизация Divs с помощью Javascript Vars

Question

Я провожу небольшой эксперимент, пытаясь случайным образом разместить изображения внутри div, используя цикл javascript. У меня были некоторые проблемы с этим.

Вот что у меня (упрощенно):

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

Сначала вы должны рассмотреть возможность использования библиотеки JavaScript, такой как jQuery. Это упростит вашу работу.

Допустим, у вас есть эта разметка

<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

Использование 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>';
    }

?>

Awesome! Спасибо за помощь с синтаксисом строки!

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

Вы забыли кавычки в document.write и экранировали неправильные символы внутри него

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