如何在JavaScript循环中为动态创建的图片添加不同href链接？

嘿，这事儿不难办！你只需要把每一张创建出来的图片包裹在<a>锚点标签里，然后利用循环的索引值i来生成对应的链接地址就可以了。

下面是修改后的完整代码：

var parent = document.getElementById('images-digtal'), 
    imagePath = '_digital.jpg', 
    img, 
    link; 

for (var i = 0; i <= 7; i++) { 
    // 创建锚点标签
    link = document.createElement('a');
    // 根据循环索引设置对应的href（i从0开始，所以+1得到1-8的序号）
    link.href = `www.google${i+1}.com`;

    // 创建图片元素
    img = new Image(); 
    img.src = i + imagePath; 

    // 把图片放到锚点标签里，再把锚点加到父容器中
    link.appendChild(img);
    parent.appendChild(link); 
}

关键改动说明： #

• 新增了link变量用来创建<a>元素，这是实现跳转的核心
• 利用模板字符串（或者也可以用字符串拼接'www.google' + (i+1) + '.com'）生成对应序号的链接，确保第1张图片对应www.google1.com，第8张对应www.google8.com
• 调整了元素嵌套顺序：先把图片放进锚点标签，再把锚点标签添加到父容器，这样点击图片就会触发跳转啦

如果需要让链接在新窗口打开，只需要在设置href之后加一行：

link.target = '_blank';

内容的提问来源于stack exchange，提问作者Seth Huffman