1

我正在使用下面的代码来显示可以正常工作的随机图像。如何添加到此代码中，以便每个图像都有自己的链接？即，如果“knife.png”是随机选择的，我希望它有一个链接，将用户带到“products/knife.html”等等。

谢谢你的帮助！

<div id="box">
<img id="image" /></div>

<script type='text/javascript'> 

var images = [
"images/knife.png",
"images/fork.png",
"images/spoon.png",
"images/chopsticks.png",];

function randImg() {
var size = images.length
var x = Math.floor(size * Math.random())
document.getElementById('image').src = images[x];
}

randImg();
4

4 回答 4

2

概括您的图像列表，使其具有多用途 - 您可以稍后添加其他信息。然后用锚标记 ( <a>) 围绕图像并使用以下内容。

<div id="box">
  <a name="imagelink"><img id="image" /></a>
</div>

<script type='text/javascript'> 
  var images = ["knife","fork","spoon","chopsticks",];

  function randImg() {
    var size = images.length
    var x = Math.floor(size * Math.random())
    document.getElementById('image').src = "images/"+images[x]+".png";
    document.getElementById('imagelink').href="products/"+images[x]+".html";
  }
</script>

randImg();
于 2013-05-21T22:01:09.427 回答
1

尝试做类似这个例子的事情。就像所有其他人所说的那样，最好将此信息存储在数据库或其他东西中，但要回答您的问题，请将您需要的值放入数组中的一个对象中并引用该对象的属性，而不仅仅是一个字符串大批。

<div id="box">
    <a id="a"><img id="image" /></a>
</div>

<script type='text/javascript'> 
var images = 
[
    imageUrlPair = { ImgSrc:"http://www.dansdata.com/images/bigknife/bigknife1280.jpg", Href:"http://reluctantgourmet.com/tools/cutlery/item/267-chefs-knife-choosing-the-right-cutlery" },
    imageUrlPair = { ImgSrc:"http://www.hometownsevier.com/wp-content/uploads/2011/01/fork.jpg", Href:"http://eofdreams.com/fork.html" },
    imageUrlPair = { ImgSrc:"http://upload.wikimedia.org/wikipedia/commons/9/92/Soup_Spoon.jpg", Href:"http://commons.wikimedia.org/wiki/File:Soup_Spoon.jpg" },
    imageUrlPair = { ImgSrc:"http://upload.wikimedia.org/wikipedia/commons/6/61/Ouashi.jpg", Href:"http://commons.wikimedia.org/wiki/Chopsticks" },
]

function randImg() {
var size = images.length;
var x = Math.floor(size * Math.random());
var randomItem = images[x];
document.getElementById('image').src = randomItem.ImgSrc;
document.getElementById('a').href = randomItem.Href;
}

randImg();
</script>
于 2013-05-21T22:27:19.643 回答
0

img用一个包围a

<a href="#" id="link"><img id="image" /></a>

然后加

document.getElementById("link").href = images[x].replace(".png",".html");

这.replace有点粗略，但你明白了。

于 2013-05-21T22:00:34.770 回答
0

您可以使用基于约定的方法。在这种情况下，约定是每个产品在“/image/[product]/.png”处有一个关联的图像，在“products/[product].html”处有一个页面

<div id="box">
<a id="link"><img id="image" /></a></div>

<script type='text/javascript'> 

var products = [
"knife",
"fork",
"spoon",
"chopsticks",];

function randImg() {
var size = images.length
var x = Math.floor(size * Math.random())
document.getElementById('image').src = "/images/" + products[x] + ".png";
document.getElementById('link').setAttribute("href", "products/" + products[x] + ".html");
}

randImg();

这是一种非常幼稚的方法，无法很好地扩展。例如，如果您有一个经常更改的产品列表，或者您需要跟踪可用单位的数量。一种更强大的方法是将有关您的产品的信息存储在数据库中，以及显示有关给定产品的数据的页面（产品详细信息页面），然后使用数据访问技术获取产品列表以显示在一个产品列表页面（类似于您在此处拥有的，除了产品列表没有硬编码），然后每个产品将链接到产品详细信息页面。

于 2013-05-21T22:02:08.460 回答