我是一名网页设计师初学者，我需要知道如何将一件事链接到另一件事。问题是每次网站刷新时我都会更改不同的报价。 我需要对位于不同 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 新手!每个人都曾经有过这样的经历，让人们指出事情是我们学习的一种方式。
几乎没有任何理由使用
new Array。使用数组文字。在这种情况下:var quotes = [ "text1", "Text2", "text3", "text4" ];language属性在 90 年代已被弃用，默认值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: "/image/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.我使用了数组文字，但我的数组文字包含对象文字(
{...}带有text: "text1"等的东西)。所以我的数组包含对象，其中每个对象都有属性text(该引文的正文)和img(要使用的图像的 URL)。我修复了随机的问题。
输出文本(我假设是 HTML 标记)和图像时，我通过设置
innerHTML来实现这一点。关于quotediv我在代码上方输出。我将所有代码放在一个立即调用的封闭函数中。这可以防止创建任何全局变量。
希望这有帮助。
关于javascript - 如何显示随机选择的文本和关联的图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17632519/