我有一個隨機影像生成陣列，我希望插入與每個影像關聯的超鏈接，但我似乎找不到有效的答案或解決方案；或者我可以理解足以適應我的情況/代碼。我是一個 javascript 新手，只是想盡我所能地學習！在此先感謝任何幫助，不勝感激！
JS如下：
var random_images_array = ['img1.jpg', 'img2.jpg', 'img3.jpg'];
function getRandomImage(imgAr, path) {
path = path || 'img/'; // default path here
var num = Math.floor( Math.random() * imgAr.length );
var img = imgAr[ num ];
var imgStr = '<img src="' path img '" alt = "">';
document.write(imgStr); document.close();
}
HTML：
<div id="heroImage" style="text-align: center">
<script type="text/javascript">getRandomImage(random_images_array, 'img/heroImage/')</script>
</div>
uj5u.com熱心網友回復：
這就是我認為您正在努力實作的目標。注意：不要使用 document.write——它有非常具體的用途，這不是一個好的用途。而是使用 innerHTML 屬性（還有其他方法）。我修改了代碼，以便您可以在代碼段中看到結果。
let random_images_array = [{
img: "https://picsum.photos/200/300?1",
link: "https://google.com"
},
{
img: "https://picsum.photos/200/300?2",
link: "https://yahoo.com"
},
{
img: "https://picsum.photos/200/300?3",
link: "https://loren.picsum.com"
}
];
function getRandomImage(imgAr, path) {
path = path || 'img/'; // default path here
path = ''; // JUST FOR S.O. TESTING
let num = Math.floor(Math.random() * imgAr.length);
let img = path imgAr[num].img;
let imgStr = `<a href='${imgAr[num].link}'><img src="${img}" alt="向 JavaScript 隨機影像陣列中的影像添加超鏈接" border="0" /></a>`;
document.querySelector('#heroImage').innerHTML = imgStr;
}
window.addEventListener('DOMContentLoaded', () => {
getRandomImage(random_images_array, 'img/heroImage/')
})<div id="heroImage" style="text-align: center">
</div>uj5u.com熱心網友回復：
picsumpicsum.photos/width/height通過重定向到具有請求尺寸的隨機影像來回答 GET 。
為了使影像和鏈接匹配，您必須發出 picsum GET 請求并從回應“Location”標頭中獲取重定向 URL。那就是應該放在 DOM 中的 URL。
運行代碼段后，右鍵單擊影像并在新選項卡中打開它。注意出現相同的影像。使用原始 GET url 作為 href 將引導用戶到新的隨機影像。
// super simple promise-returning http request
async function get(url) {
return new Promise(resolve => {
const xmlHttp = new XMLHttpRequest();
xmlHttp.addEventListener("load", () => resolve(xmlHttp));
xmlHttp.open("GET", url);
xmlHttp.send();
});
}
async function getRandomImage(width, height) {
const url = `https://picsum.photos/${width}/${height}`;
let res = await get(url);
// this is the important part: we need the redirect url for the image
const redirectURL = res.responseURL
const html = `<a href='${redirectURL}' target='_blank'><img src="${redirectURL}" alt="向 JavaScript 隨機影像陣列中的影像添加超鏈接"/></a>`;
const el = document.querySelector('#heroImage')
el.innerHTML = html;
}
getRandomImage(200, 300)<div id="heroImage" style="text-align: center">
</div>請注意，我們不需要從 URL 陣列中隨機選擇。picsum 在初始 GET 上進行隨機化。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/377992.html
標籤：javascript 数组
下一篇：手動排序，2×2？