本文介绍如何解决 jQuery 中多个容器共享同一全局变量导致图片重复的问题，通过 HTML data-* 属性为每个容器绑定专属图片数组，并动态加载对应随机图片。
本文介绍如何解决 jquery 中多个容器共享同一全局变量导致图片重复的问题，通过 html `data-*` 属性为每个容器绑定专属图片数组，并动态加载对应随机图片。
在实际开发中，若将多个 var images = [...] 声明写在独立 <script></script> 标签内（尤其嵌套在不同 DOM 节点中），JavaScript 会按执行顺序逐个覆盖全局变量 images，最终仅保留最后一个声明的数组——这正是所有 .random-image-container 都显示相同两张图片的根本原因。
✅ 推荐解决方案：使用 data-images 自定义属性存储每组图片路径，并在 jQuery 遍历中解析使用：
<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><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script><script>
$('.random-image-container').each(function() {
const container = $(this);
// 安全解析 data-images 属性（需确保 JSON 格式正确）
const images = JSON.parse(container.data('images') || '[]');
if (images.length > 0) {
const randomSrc = images[Math.floor(Math.random() * images.length)];
$('<img class="random-image" src="' + randomSrc + '" alt="Random image">').appendTo(container);
}
});
</script>
⚠️ 注意事项：
-
data-images的值必须是合法 JSON 字符串（双引号包裹、无尾逗号、特殊字符需转义），否则JSON.parse()会抛出错误； - 建议添加空数组兜底
|| '[]'和长度校验，避免因数据缺失导致脚本中断； - 若图片路径含空格或特殊符号，推荐使用
encodeURIComponent()编码后存入data属性，读取时再decodeURIComponent()解码； - 更健壮的替代方案：将全部图片配置集中管理为对象或数组，在初始化时按容器索引匹配，便于维护与扩展。
该方法解耦了数据与逻辑，既保持 HTML 结构清晰，又确保每个容器拥有完全独立的随机源，是前端动态内容渲染中的最佳实践之一。
