提问人：mmdwc 提问时间：11/14/2023 最后编辑：Rory McCrossanmmdwc 更新时间：11/17/2023 访问量：49
div 中的 jquery 随机图像数组
jquery random image arrays inside divs
问：
我有这个网站，当你刷新时，它会从多个 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>有人可以帮我解决这个问题吗？
答：
0赞
Rory McCrossan
11/14/2023
#1
问题是因为你在每个块中重新声明了相同的变量 - 你没有追加/推送到数组。我建议您将保存图像路径/文件名的数据结构更改为对象或 2D 数组，并且至关重要的是，只定义一次。<script>
下面是一个示例，说明如果将代码更新为使用 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
1赞
cMendes
11/14/2023
#2
这似乎与“images”变量的范围有关。
每个 <script> 块都会覆盖前一个块，因此，jQuery 函数中只使用了最后一个数组。
您有几种可能的解决方案：
- 为每个数组声明不同的变量（例如：var images1 = ['IMG/1.jpg'， 'IMG/2.jpg']; var images2....）
- 使用图像数组将 data-images 属性添加到“random-image-container”div 中
<div class="random-image-container" data-images='["IMG/1.jpg", "IMG/2.jpg"]'></div>
然后，添加到jQuery循环中：
var images = JSON.parse(container.data('images')); //this will access your data-images attribute data
评论
0赞
mmdwc
11/15/2023
谢谢@cMendes，我不得不稍微修改您的代码： $（'.random-image-container'）.each（function（） { var container = $（this） var images = container.data（'images'） $（'<img class=“random-image” src=“' + images[Math.floor（Math.random（） * images.length）] + '”>'）.appendTo（container）;
评论