Question

我想使用javascript来填充HTML页面的一部分，其中包含链接到完整大小的imaga的缩略图。目前运行此代码时发生的所有事情是它打开p打开和关闭。我希望它能为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

两件事：

~~在循环内部和之后，你将一个完全 new 值分配给元素的innerHTML，覆盖你可能拥有的任何内容之前。~~显然在初始发布后，您编辑了问题以使用+=代替。即使这样，使用innerHTML += ...也是一个坏主意，因为它会导致浏览器不断重新序列化元素的DOM并每次重新解析字符串，如果你把它交给半完整的HTML（例如"<p>"），+=时使用的内容可能是"<p></p>" - 所以当您添加时，添加的内容最终会出错。相反，在变量中构建文本，然后在结束时将其分配给一次。
您从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>";

Answer 2

for条件部分中有错误。取代

for( var img = 1; img >= 41; img++)

与

for( var img = 1; img <= 41; img++)

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

2 个答案: