div 内的 jquery 随机图像数组

Question

我有一个网站，当你刷新时，它会从多个 div 内的多个 JS 数组中调出一个随机图像（每个 div 都有自己的 JS 数组，其中包含不同的图像）。问题是我的代码仅使用最后声明的 JS 数组，并对所有 div 使用相同的 2 张图片。

$('.random-image-container').each(function() {
  var container = $(this)
  $('<img class="random-image" src="' + images[Math.floor(Math.random() * images.length)] + '">').appendTo(container);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<article class="grid-item">
  <div class="random-image-container">
    <script>
      var images = ['IMG/1.jpg', 'IMG/2.jpg'];
    </script>
  </div>
</article>
<article class="grid-item">
  <div class="random-image-container">
    <script>
      var images = ['IMG/3.jpg', 'IMG/4.jpg'];
    </script>
  </div>
</article>
<article class="grid-item">
  <div class="random-image-container">
    <script>
      var images = ['IMG/5.jpg', 'IMG/6.jpg'];
    </script>
  </div>
</article>
<article class="grid-item">
  <div class="random-image-container">
    <script>
      var images = ['IMG/7.jpg', 'IMG/8.jpg'];
    </script>
  </div>
</article>

有人可以帮我吗？

Answer 1

问题是因为您在每个 <script> 块中重新声明

same

变量 - 您没有附加/推送到数组。我建议您更改将图像路径/文件名保存到对象或二维数组中的数据结构，最重要的是，仅定义它一次。

以下示例展示了如果您将代码更新为使用 2D 数组来存储图像，并且父数组的每个元素都等于每个

.random-image-container

:

const images = [
  ['IMG/1.jpg', 'IMG/2.jpg'],
  ['IMG/3.jpg', 'IMG/4.jpg'],
  ['IMG/5.jpg', 'IMG/6.jpg'],
  ['IMG/7.jpg', 'IMG/8.jpg']
]

$('.random-image-container').each((i, el) => {
  const filepath = images[i][Math.floor(Math.random() * images[i].length)];
  $(`<img class="random-image" src="${filepath}" alt="${filepath}" />`).appendTo(el);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<article class="grid-item">
  <div class="random-image-container"></div>
</article>
<article class="grid-item">
  <div class="random-image-container"></div>
</article>
<article class="grid-item">
  <div class="random-image-container"></div>
</article>
<article class="grid-item">
  <div class="random-image-container"></div>
</article>

请注意，在此示例中添加

alt

属性只是为了明确要显示哪个图像。