jquery - 在 jquery 中更改多个 div 位置

Question

我正在尝试使用 jquery .each 函数更改 5 个 div 的左/上值。目前，div 在彼此之上产生，然后不受 jquery 的影响，同样发生在这个片段中。我必须更改什么才能使 div 移动到屏幕上的随机位置。

$(function() {
  var docHeight = $(window).height(),
    docWidth = $(window).width(),
    $div = $('.randomSpawn'),
    divWidth = $div.width(),
    divHeight = $div.height(),
    heightMax = docHeight - divHeight,
    widthMax = docWidth - divWidth;
  $div.each(function() {
    $(this).css("left", "Math.floor( Math.random() * widthMax )");
    $(this).css("top", "Math.floor( Math.random() * heightMax )");
  });
});

.randomSpawn {
  position: fixed;
  background-color: black;
  display: block;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="1" class="randomSpawn"></div>
<div id="2" class="randomSpawn"></div>
<div id="3" class="randomSpawn"></div>
<div id="4" class="randomSpawn"></div>
<div id="5" class="randomSpawn"></div>

Answer 1

您的代码在一个字符串中。你需要它是普通的 JS。 ;)

    $(this).css("left", Math.floor( Math.random() * widthMax ));
    $(this).css("top", Math.floor( Math.random() * heightMax ));

$(function() {
  var docHeight = $(window).height(),
    docWidth = $(window).width(),
    $div = $('.randomSpawn'),
    divWidth = $div.width(),
    divHeight = $div.height(),
    heightMax = docHeight - divHeight,
    widthMax = docWidth - divWidth;
  $div.each(function() {
    $(this).css("left", Math.floor( Math.random() * widthMax ));
    $(this).css("top", Math.floor( Math.random() * heightMax ));
  });
});

.randomSpawn {
  position: fixed;
  background-color: black;
  display: block;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="1" class="randomSpawn"></div>
<div id="2" class="randomSpawn"></div>
<div id="3" class="randomSpawn"></div>
<div id="4" class="randomSpawn"></div>
<div id="5" class="randomSpawn"></div>