使用JavaScript实现页面加载时随机展示对应图片及关联文本

实现方案 #

你只需要在现有代码基础上补充文本块的匹配显示逻辑即可，具体修改步骤如下：

1. 完善JavaScript代码 #

原有JS已经实现了随机图片的选取逻辑，只需要新增对应文本块的显示规则即可，同时建议加上DOM加载完成的监听，避免元素未渲染时执行JS报错。
修改后的完整JS代码如下：

// 等待页面DOM全部加载完成后再执行逻辑
jQuery(function() {
  // 用对象数组统一管理图片和对应文本的映射关系，后续新增内容时直接加数据即可，不用改逻辑
  const contentMap = [
    { img: "image1.png", textClass: "section-text-1" },
    { img: "image2.png", textClass: "section-text-2" },
    { img: "image3.png", textClass: "section-text-3" }
  ];
  // 生成随机索引
  const randomIndex = Math.floor(contentMap.length * Math.random());
  const target = contentMap[randomIndex];
  // 设置随机图片
  jQuery('#randomImages').attr('src', target.img);
  // 显示匹配的文本块
  jQuery(`.${target.textClass}`).show();
});

如果你不想调整原有数组的写法，也可以直接在原有JS代码最后加一行即可生效：

jQuery('.section-text-' + (x + 1)).show();

2. 补充jQuery依赖引入 #

你当前的HTML代码没有引入jQuery库，但JS代码用了jQuery语法，需要在引入random-picture.js之前先引入jQuery：

<!-- 新增jQuery引入，放在random-picture.js的前面 -->
<script src="https://cdn.staticfile.org/jquery/3.6.4/jquery.min.js"></script>
<script src="random-picture.js"></script>

3. 可选HTML优化（非必须，建议修改） #

当前HTML里h1标签嵌套p标签不符合HTML语义规范，建议调整为：

<div class="section-text-1">
  <h1>RANDOM 1</h1>
  <p>random1</p>
</div>

其余两个文本块也做同样修改即可。

修改完成后每次页面加载就会自动随机展示匹配的图片和对应文本。

内容的提问来源于stack exchange，提问作者Adzidue