Javascript 随机图像及其链接答案

【问题标题】：Javascript Random Images and its linkJavascript 随机图像及其链接
【发布时间】：2014-02-24 23:02:21
【问题描述】：

我计划一次加载 1 张图片，并拥有相应的链接。我希望它将图像写入 ID 为“广告”的 div。这是我到目前为止所拥有的。我只是在 JavaScript 方面不够先进，无法让它做我想做的事情：P。每个链接数组值与图像 src 数组相同。所以 img[0] 和 link[0] 属于同一个。

我想要它做的是找到图像，然后将 URL 与它一起附加，这样当单击图像时，它将转到该站点。任何帮助表示赞赏！谢谢！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        h1 {
            font-size: 32px;
            font-weight: bold;
            color: red;
        }
    </style>
</head>
<body>
    <h1>Reload the page to see different images</h1>
    <h2>Click an image for a link.</h2>
    <div id="ads">
    <!--image link/src here-->
</div>
</body>
</html>


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">


var image = new Array ();
image[0] = "<img src='images/img1.png'></a>";
image[1] = "<img src='images/img2.jpg'></a>";
image[2] = "<img src='images/img3.jpg'></a>";
image[3] = "<img src='images/img4.jpg'></a>";

var link = new Array ();
    link[0] = "<a href='http://www.gooogle.com' target='_blank'>";
    link[1] = "<a href='http://www.shade-designs.com' target='_blank'>";
    link[2] = "<a href='http://www.sharpnackford' target='_blank'>";
    link[3] = "<a href='http://www.donleyford.com' target='_blank'>";

var size = image.length
var x = Math.floor(size*Math.random());
link = x;
document.getElementById('ads').appendChild(link).src=image[x];
</script>

【问题讨论】：

好吧，你正在将一个数组附加到没有 src 属性的 div 中。

标签： javascript jquery html image src

【解决方案1】：

如果您在广告 div 中有任何额外内容 innerHTML 将覆盖它。所以最好使用附加：

$('#ads').append(link[x]+image[x]);

See this Demo

【讨论】：

更好。我将不得不在嵌套 div 内的内容的不同网站中使用它，所以这更适合我的需求。谢谢！ :)

【解决方案2】：

代替：

link = x;
document.getElementById('ads').appendChild(link).src=image[x];

做：

document.getElementById('ads').innerHTML = link[x] + image[x];

【讨论】：

如果要追加图片，请将=改为+=