如何为含图片的现有JavaScript数组添加对应文本

1. 重构图片数组为对象数组 #

把原来只存图片路径的数组，改成包含图片路径和对应文本的对象数组，让图片和文本一一绑定：

var myImages1 = [
  { img: "img1.png", text: "这是图片1的对应文本" },
  { img: "img2.png", text: "这是图片2的对应文本" },
  { img: "img3.png", text: "这是图片3的对应文本" },
  { img: "img4.png", text: "这是图片4的对应文本" }
];

2. 修改HTML结构，添加文本显示容器 #

在图片所在容器里新增一个元素，用来展示选中图片的对应文本，给它设置id方便后续获取：

<div class="fenetre">
  <a href="#" onClick="pickimg2(); return false;">
    <img src="image.png" name="randimg" border=0>
    <!-- 新增的文本显示容器 -->
    <div id="imgText"></div>
  </a>
</div>

3. 更新随机选择函数，同步更新图片和文本 #

修改pickimg2函数，随机选中数组中的一个对象后，同时更新图片路径和文本容器的内容：

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function pickimg2() {
  const randomIdx = getRandomInt(0, myImages1.length - 1);
  const selected = myImages1[randomIdx];
  // 更新图片
  document.randimg.src = selected.img;
  // 更新文本
  document.getElementById('imgText').textContent = selected.text;
}

完整代码示例 #

<div class="fenetre">
  <a href="#" onClick="pickimg2(); return false;">
    <img src="image.png" name="randimg" border=0>
    <div id="imgText"></div>
  </a>
</div>

<script>
var myImages1 = [
  { img: "img1.png", text: "这是图片1的对应文本" },
  { img: "img2.png", text: "这是图片2的对应文本" },
  { img: "img3.png", text: "这是图片3的对应文本" },
  { img: "img4.png", text: "这是图片4的对应文本" }
];

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function pickimg2() {
  const randomIdx = getRandomInt(0, myImages1.length - 1);
  const selected = myImages1[randomIdx];
  document.randimg.src = selected.img;
  document.getElementById('imgText').textContent = selected.text;
}
</script>

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