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

Answer 2

可能是因为您使用ID来引用计时器容器。当您使用getElementById时，您将始终获得具有相应ID的第一个元素。

您可以使用类似getElementsByClassName()的内容，它会返回特定班级的所有事件。

尝试这种方法：

HTML呈现：

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

JavaScript的：

var elements = document.getElementsByClassName('fighter');

Array.prototype.forEach.call(elements, function(element) {
  element.setAttribute("style", "margin-top:" + Math.floor(Math.random()*100) + "px;")
})

PS：你应该看看jQuery。它可以让您的生活更轻松，实现更清洁。

如果您有任何问题，请立即告诉我：）

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

2 个答案: