如何显示带有关联图像的随机选择的文本？答案

【问题标题】：How do I display randomly-chosen text with an associated image?如何显示带有关联图像的随机选择的文本？
【发布时间】：2013-07-12 00:50:55
【问题描述】：

我是一名初学者网页设计师，我需要知道如何将一个事物链接到另一个事物。问题是每次网站刷新时我都会更改不同的报价。我需要对位于不同 div 标签中的图像做同样的事情。我需要链接它们的原因是因为图像需要与报价相协调。例如：用图片 0 引用 0。

这里是javascript代码：

var quotes=new Array();
quotes[0] = "text1";
quotes[1] = "Text2";
quotes[2] = "text3";
quotes[3] = "text4";

var q = quotes.length;
var whichquote=Math.round(Math.random()*(q-1));
function showquote(){document.write(quotes[whichquote]);}
showquote();

这是位于 javascript 文本的代码：

<script language="javascript" type="text/javascript" src="quotes.js"></script>

【问题讨论】：

听起来您不需要将 JavaScript 链接到 JavaScript。听起来你必须协调 JavaScript 以及它生成图像的任何东西。
谢谢！你知道我该怎么做吗？
仅供参考（因为您是 JavaScript 新手）：几乎没有任何理由使用 new Array。使用数组文字。在这种情况下：pastie.org/8137855 另外，language 属性在 90 年代已弃用，script 上的type 的默认值是text/javascript。因此，您只需要 <script src="..."></script> 即可。对不起，你的随机数是错误的。你想要=Math.round(Math.random() * q)，而不是q-1。
@用户：不可能说，你没有展示任何东西告诉我们图像是如何选择的。
问题是我还是不知道怎么放图片，也找不到教程。

标签： javascript quotes dynamic-linking page-refresh

【解决方案1】：

假设你有类似下面的 html：

<div id="quote"></div>
<div>
    <img class="image" src="http://www.placehold.it/100x50&text=1" />
    <img class="image" src="http://www.placehold.it/100x50&text=2" />
    <img class="image" src="http://www.placehold.it/100x50&text=3" />
    <img class="image" src="http://www.placehold.it/100x50&text=4" />
</div>

和css

.image {
   display: none;
}

那么你需要在你的 showquote 函数中做这样的事情：

function showquote(){
   document.getElementById('quote').innerHTML = quotes[whichquote];
   document.getElementsByTagName('img')[whichquote].style.display="block";
}

请看这里的小提琴： http://jsfiddle.net/fYPY7/

【讨论】：

【解决方案2】：

关于该代码的一些注释。不要以错误的方式理解这些，您是 JavaScript 新手！每个人都曾经，让人们指出问题是我们学习的一种方式。

几乎没有任何理由使用new Array。使用数组文字。在这种情况下：
```
var quotes = [
    "text1",
    "Text2",
    "text3",
    "text4"
];
```
language 属性在 90 年代被弃用，script 上的type 的默认值为text/javascript。因此，您只需 <script src="..."></script> 即可。
您的随机数错误。 Math.random 返回一个从 0（包括）到 1（不包括）的数字，因此您只想乘以图像数量，而不是数字减一。
document.write 最好避免。在现代网络编程中使用它的理由非常非常少。

这是一种处理您所描述的方法：Live Example | Live Source

（你必须经常刷新它，因为它只有两个条目，所以你很有可能看到相同的条目。）

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Random Text Plus Image</title>
</head>
<body>
  <div id="quote"></div>
  <script>
    (function() {
      var quotes = [
        {
          text: "text1",
          img:  "http://i.stack.imgur.com/FqBE6.jpg?s=32&g=1"
        },
        {
          text: "text2",
          img:  "https://www.gravatar.com/avatar/ca3e484c121268e4c8302616b2395eb9?s=32&d=identicon&r=PG",
        }
      ];
      var quote = quotes[Math.floor(Math.random() * quotes.length)];
      document.getElementById("quote").innerHTML =
        '<p>' + quote.text + '</p>' +
        '<img src="' + quote.img + '">';
    })();
  </script>
</body>
</html>

我在那里做了什么：

我输出了一个元素 <div id="quote"></div> 来保存引用和图像。这不是document.write。
我使用了一个数组字面量，但我的数组字面量包含 object 字面量（{...} 带有 text: "text1" 等的东西）。所以我的数组包含对象，其中每个对象都有属性text（引用的文本）和img（要使用的图像的URL）。
我修复了随机的东西。
我将所有代码放在一个封闭函数中，我立即调用该函数。这可以防止创建任何全局变量。

希望这会有所帮助。

【讨论】：

非常感谢您为我提供的帮助并花时间解释！我希望我能学得更好，成为一个真正优秀的专业人士！你给我的答案对我帮助很大！ :) 我希望每个人都有美好的一天。