【发布时间】:2015-01-30 16:41:13
【问题描述】:
我有这个代码,我的问题是图像和文本出现在一个 div 中。当图像也出现在另一个 div 上时,如何分离文本并将其显示到另一个 div。但是当我重新加载页面时,图像 1 将对应于文本 1。与图像 2 相同,它也应该与文本 2 一起出现。
<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: "image1.jpg"
},
{
text: "text2",
img: "image2.jpg",
}
];
var quote = quotes[Math.floor(Math.random() * quotes.length)];
document.getElementById("quote").innerHTML =
'<p>' + quote.text + '</p>' +
'<img src="' + quote.img + '">';
})();
</script>
</body>
</html>
以及来自 cmets 的更新代码:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Random Text Plus Image</title>
</head>
<body>
<div id="img"></div>
<div id="text"></div>
<script>
(function() {
var img = ["image1.jpg", "image2.jpg"];
var text= ['text1','text2'];
var img = img[Math.floor(Math.random() * img.length)];
var text = text[Math.floor(Math.random() * text.length)];
document.getElementById("img").innerHTML = '<div>'+ text + '</div>'+ '<img src="' + img + '">'; })();
</script>
</body>
</html>
【问题讨论】:
-
所以将一行放在一个 div 中,并将图像设置在另一个中。看看代码在做什么,对另一个 div 做同样的事情。
-
我已经尝试过了,但似乎我做错了。这是我的问题。我是 javascript 的新手。 @epascarello
-
@epascarello'+ ''; })();
随机文字加图片
当我操作代码时,image1 不与文本 1 配对....有时它与显示的文本 2 配对
因为你使用的是两个随机数!
标签: javascript html variables random