javascript - 使用javascript for语句创建一堆缩略图链接

Question

我想使用 javascript 用链接到全尺寸图像的缩略图填充 HTML 页面的一部分。目前，这段代码运行时发生的所有事情就是打印 p open 和 close。我希望它为 img (#) 制作缩略图，其中 # 是 1-41。

JavaScript:

document.getElementById('img').innerHTML = "<p>"
for( var img = 1; img >= 41; img++)
{
    document.getElementById('img').innerHTML += ("<a href='img/pic (" + img + ").JPG'><img src='img/thumbs/pic (" + img + ").png' width=156 height=84 alt='img " + img + "'></a>")
}
document.getElementById('img').innerHTML += "</p>"

HTML:

<div class="main">
    <div id="img"><div>
</div>

Answer 1

两件事:

1. 在循环内部和循环之后，您都为 innerHTML 分配了一个全新的新值。元素，覆盖您之前可能拥有的任何内容。 显然在最初的帖子之后，您编辑了问题以使用 +=反而。即便如此，使用 innerHTML += ...是个坏主意，因为它会导致浏览器不断地重新序列化元素的 DOM 并每次都重新解析字符串，如果您将它交给半完整的 HTML(例如 "<p>")，它会在什么时候使用你做+=很可能是"<p></p>" - 所以当你添加它时，你添加的内容最终会出现在错误的地方。相反，在变量中构建文本，然后在最后一次分配它。

2. 您从 img = 1 开始然后告诉循环继续 img >= 41 .所以循环体永远不会运行，因为1不是 >= 41 .

最小更新:

var markup = "<p>";
for( var img = 1; img <= 41; img++)
{
    markup += "<a href='img/pic (" + img + ").JPG'><img src='img/thumbs/pic (" + img + ").png' width=156 height=84 alt='img " + img + "'></a>";
}
document.getElementById('img').innerHTML = markup + "</p>";