div 的 JavaScript 随机边距仅适用于第一个 div

Question

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

@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;");

问题是只有第一个 div 的边距会发生变化。

Answer 1

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";
});