将随机文本与随机图像数组配对答案

【问题标题】：Pair Random Text With Random Image Array将随机文本与随机图像数组配对
【发布时间】：2014-01-16 15:23:58
【问题描述】：

我有一个随机图像数组，它在我的网站上显示图像，每次页面刷新都会显示不同的图像。它工作得很好，因此：

<script type="text/javascript">
var total_images = 5;
var random_number = Math.floor((Math.random()*total_images));
var random_img = new Array();
random_img[0] = '<img src="img/picture1.png">';
random_img[1] = '<img src="img/picture2.png">';
random_img[2] = '<img src="img/picture3.png">';
document.write(random_img[random_number]);
</script>

我还想做的是，在这个图像数组的正下方，一个标准的 HTML 段落，是一个与显示的图像配对的文本正文。

所以，如果随机图像数组调用“picture2”，我想在它下面的段落中显示“text2”。 'picture1' 会显示 'text1'，依此类推。

有人可以帮我解决这个问题吗？谢谢你。

【问题讨论】：

我认为您错过了问题的最后一点。
抱歉，我还没准备好就点击了“post”。

标签： javascript arrays text random

【解决方案1】：

仅供参考，您的 img 标签需要关闭，我也在下面进行了更正：

<script type="text/javascript">
   var total_images = 5;
   var random_number = Math.floor((Math.random()*total_images));
   var random_img = new Array();
   var random_text = [];

   random_img[0] = '<img src="img/picture1.png" />';
   random_text[0] = 'text1';
   random_img[1] = '<img src="img/picture2.png" />';
   random_text[1] = 'text2';
   random_img[2] = '<img src="img/picture3.png" />';
   random_text[2] = 'text3';
   document.write(random_img[random_number] + ' <br/><p>' + random_text[random_number] + '</p>');
</script>

【讨论】：

非常感谢！一个快速的附加问题 - 设置文本样式以适应页面其余部分的文本的最佳方式是什么？（用 CSS 完成？）我应该围绕脚本创建一个 div 并以这种方式设置样式吗？
哦，我明白了 - 我可以在脚本中，在 random_text 调用之后的“...”之间完成。

【解决方案2】：

您已经得到了答案，但这是另一种使用对象数组存储信息以供访问的方法：

var arr = [
  { url: 'http://dummyimage.com/10x10/000/fff', text: 'text1' },
  { url: 'http://dummyimage.com/30x30/000/fff', text: 'text2' },
  { url: 'http://dummyimage.com/50x50/000/fff', text: 'text3' }
];

然后您可以使用arr[index].url 和arr[index].text 访问信息。

Here is a working example.

【讨论】：