javascript - div的JavaScript随机余量仅适用于第一个div

我正在显示所有用户的图像。我希望它们出现在不同的地方。我现在有以下代码：

@foreach($users as $user)
  <div class="col-md-2 text-center" id="fighter">
    <img src="{{$user->char_image}}">
  </div>
@endforeach

var fighter = document.getElementById('fighter');
fighter.setAttribute("style", "margin-top:" + Math.floor(Math.random() * 100) + "px;");

问题在于，边距仅针对第一格变化。

最佳答案

id属性在DOM中必须唯一。您看到的问题是由于这种期望。要使用多个分组元素，请改用class：

@foreach($users as $user)
  <div class="col-md-2 text-center fighter">
    <img src="{{$user->char_image}}">
  </div>
@endforeach

然后在JS中，您需要遍历这些元素并分别设置margin-top：

Array.from(document.getElementsByClassName('fighter')).forEach(function(el) {
  el.style.marginTop = Math.floor(Math.random() * 100) + "px";
});

或在jQuery中：

$('.fighter').css('margin-top', function() {
  return Math.floor(Math.random() * 100) + "px";
});