Question

在我问我的问题之前，我想先讲一些背景故事，以便我们都在同一页面上。

因此，我在外部js文件中写入了200个项目的数组，如下例所示：

var theArray = [
    {"name": "ford", "year": "2004", "url": "www.ford.com"}, 
    {"name": "chevrolet", "year": "2006", "url": "www.chevrolet.com"} 
];

我之所以这样创建数组，是因为我将随机选择数组中的索引，并且该随机生成的数字将决定要在html页面上显示的信息。为每辆车使用正确的信息，这是我在创建数组后所做的：

var randomPick = Math.floor(Math.random() * theArray.length);
document.getElementbyId("carnameFord").innerHTML = theArray[randomPick].name; 
document.getElementbyId("caryearFord").innerHTML = theArray[randomPick].year;
document.getElementbyId("carurlFord").innerHTML = theArray[randomPick].url;

现在，当我在做我的小项目的HTML部分时。

我在html文件上显示名称和年份没有问题，顺便说一下，这就是我在html页面上显示它们的方式：

<h2>Name: <font color="red"><span id="carnameFord"></span></font></h2>
<h2>Year: <font color="red"><span id="caryearFord"></span></font></h2>

现在，我的问题是：

由于我是在数组中随机选择一个索引，因此无法在href中放入设置的url。因此，我该如何创建一个如下所示的超链接：“想了解更多信息？请点击这里！

，并且当用户单击“点击此处！”时它基本上会将用户带到www.ford.com，这就是数组中说明的网址。

编辑：

Answer 1

下面的代码可能可以帮助您满足要求。

var theArray = [
    {"name": "ford", "year": "2004", "url": "www.ford.com"}, 
    {"name": "chevrolet", "year": "2006", "url": "www.chevrolet.com"} 
];

const labels = {
learnMore: "Want to Learn More?",
name: "Name",
year: "Year",
click: "CLICK HERE!"
}

const htmlArray = theArray.map((el, index) => {
	return `
  	<div>
    <h2>${labels.name}: <font color="red"><span>${el.name}</span></font></h2>
		<h2>${labels.year}: <font color="red"><span>${el.year}</span></font></h2>
    ${labels.learnMore} <a href="${el.url}" title="${el.name}">${labels.click}</a>
    </div>
  `;
})

document.getElementById("container").innerHTML = htmlArray.join('');

<div id="container">

</div>

快乐编码！

如何使用带有锚标记的数组中的随机选择的URL链接

1 个答案: