4

我想使用 javascript 来填充 HTML 页面的一部分，其中包含链接到全尺寸图像的缩略图。目前，当此代码运行时发生的所有事情都是打印 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>
4

2 回答 2

5

两件事情：

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

  2. 您从img = 1while 开始，然后告诉循环继续img >= 41。所以循环体永远不会运行，因为1is not >= 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>";
于 2013-11-04T15:16:46.863 回答
1

for您在条件部分有错误。代替

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

和

for( var img = 1; img <= 41; img++)
于 2013-11-04T15:16:13.587 回答