jQuery 实现多容器独立随机图片加载的正确方法-js教程-PHP中文网

jQuery 实现多容器独立随机图片加载的正确方法

本文介绍如何在多个容器中分别加载各自独立的随机图片数组，解决因变量作用域导致所有容器共用最后一组图片的问题。

本文介绍如何在多个容器中分别加载各自独立的随机图片数组，解决因变量作用域导致所有容器共用最后一组图片的问题。

在 jQuery 中为多个 .random-image-container 容器动态插入随机图片时，若直接在 HTML 中多次声明同名变量 var images = [...]，由于 JavaScript 全局作用域特性，后声明的 images 会覆盖前一个——最终所有容器都引用同一个（即最后一个）数组，造成“所有 div 显示相同两张图”的典型问题。

根本原因在于：<script></script> 标签内声明的 images 变量未做作用域隔离，全部挂载在全局 window 对象下，形成变量污染。

✅ 推荐解决方案：使用 data-images 自定义属性 + JSON.parse() 动态读取
将每组图片路径以 JSON 字符串形式写入对应容器的 data-images 属性，既保持结构清晰，又避免变量冲突：

<article class="grid-item"><div class="random-image-container" data-images='["IMG/1.jpg", "IMG/2.jpg"]'></div>
</article><article class="grid-item"><div class="random-image-container" data-images='["IMG/3.jpg", "IMG/4.jpg"]'></div>
</article><article class="grid-item"><div class="random-image-container" data-images='["IMG/5.jpg", "IMG/6.jpg"]'></div>
</article><article class="grid-item"><div class="random-image-container" data-images='["IMG/7.jpg", "IMG/8.jpg"]'></div>
</article>

对应 jQuery 初始化代码（需置于所有 HTML 之后或 $(document).ready() 中）：

jQuery 1.12.4

jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。

下载

$(document).ready(function() {
  $('.random-image-container').each(function() {
    const container = $(this);
    const images = JSON.parse(container.data('images') || '[]');

    if (images.length === 0) {
      console.warn('No images found in data-images for:', container);
      return;
    }

    const randomSrc = images[Math.floor(Math.random() * images.length)];
    $('@@##@@').appendTo(container);
  });
});

⚠️ 注意事项：