Question

我是初学网页设计师，我需要知道如何将一件事情联系到另一件事。问题是，每次网站刷新时，我都会更改不同的引号。我需要对位于不同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>

Answer 1

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

几乎没有任何理由使用new Array。使用数组文字。在这种情况下：
```
var quotes = [
    "text1",
    "Text2",
    "text3",
    "text4"
];
```
{0}已弃用language属性，type上的默认值script为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）。
我修理了随机的东西。
当输出文本（我假设是HTML标记）和图像时，我通过在代码上方的innerHTML quote I输出上设置div来实现。
我将所有代码放在一个我立即调用的封闭函数中。这可以防止创建任何全局变量。

希望这有帮助。

Answer 2

假设你有类似下面的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 个答案: