如何使用关联图像显示随机选择的文本？ [英] How do I display randomly-chosen text with an associated image?
问题描述
我是初学网页设计师，我需要知道如何将一件事情联系到另一件事。问题是，每次网站刷新时，我都会更改不同的引号。
我需要对位于不同div标签中的图像做同样的事情。我需要链接它们的原因是因为图像需要与引用协调。
例如：引用0与图像0。
I'm a beginner web designer and I need to know how can I link one thing to another. The thing is that I'm making different quotes change every time the site refreshes. And I need to do the same thing with images that are located in a different div tag. The reason I need to link them is because the image needs to coordinate with the quote. For example: quote 0 with image 0.
这是javascript代码：
Here is the javascript code:
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文本的代码：
And this is the code that is located the javascript text:
<script language="javascript" type="text/javascript" src="quotes.js"></script>
推荐答案
关于该代码的一些注释。不要采取这些错误的方式，你是JavaScript的新手！每个人都曾经一次，让人们指出问题是我们学习的一种方式。
Some notes on that code. Don't take these the wrong way, you're new to JavaScript! Everyone was once, having people point things out is one way we learn.
-
几乎没有任何理由使用
new Array。使用数组文字。在这种情况下：
There's almost never any reason to use
new Array. Use an array literal. In this case:
var quotes = [
"text1",
"Text2",
"text3",
"text4"
];
语言属性已弃用在90年代，脚本上的默认值类型是 text / javascript 。所以只需要< script src =...>< / script> 就可以了。
The language attribute was deprecated in the 90's, and the default value of type on script is text/javascript. So just <script src="..."></script> is all you need.
您的随机数是错误的。 Math.random 从 0 （含）返回一个数字到 1 （独占），因此您只想乘以图片数量，而不是数字减一。
Your random number is wrong. Math.random returns a number from 0 (inclusive) to 1 (exclusive), so you want to just multiply by the number of images, not the number minus one.
<最好避免使用code> document.write 。在现代网络编程中使用它的理由非常非常少。
document.write is best avoided. There's very, very little reason to use it in modern web programming.
Here's one way to approach doing what you described: 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。
I output an element, the
<div id="quote"></div>, to hold the quote and image. This is instead of thedocument.write.
我使用的是数组文字，但是我的数组文字包含对象文字（ {...} 带有文字的东西：text1等等）。所以我的数组包含对象，其中每个对象都有属性 text （该引用的文本）和 img （要使用的图片的网址。
I used an array literal, but my array literal contains object literals (the {...} things with text: "text1" and such in them). So my array contains objects, where each object has the properties text (the text of that quote) and img (the URL of the image to use).
我修复了随机内容。
当输出文本（我假设是HTML标记）和图像时，我通过在引用 innerHTML 来做到这一点> div 我在代码上方输出。
When outputting the text (which I assume is HTML markup) and the image, I do that by setting innerHTML on the quote div I output above the code.
我将所有代码放在一个封闭的函数中我立即打电话。这可以防止创建任何全局变量。
I put all of my code in an enclosing function that I call immediately. This prevents creating any global variables.
希望这会有所帮助。
这篇关于如何使用关联图像显示随机选择的文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
