使用javascript for語句創建一串縮略圖鏈接

我想用JavaScript來填充鏈接到完整大小的圖片的縮略圖的HTML頁面的一部分。當前代碼運行時發生的所有事情是打印p打開和關閉。我希望它爲img（＃）製作縮略圖，其中＃是1-41。使用javascript for語句創建一串縮略圖鏈接

的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>

來源

2013-11-04 themightymanuel

兩件事情：

~~這兩個循環中和之後，你要指定一個完全新價值的的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>";

來源

2013-11-04 15:16:46

第一條語句是不正確的，因爲OP採用'+ ='內環路和之後。不過，我喜歡你的解決方案，因爲它不會多次進行DOM查找來設置'innerHTML' – Vadim

我正要說與Vadim相同的東西:) –

實際上我之後編輯過它，因爲我已經使用了+ = origionally只是=他保存編輯之前propobly已加載頁面 – themightymanuel

你有for條件節是錯誤的。更換

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

與

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

來源

2013-11-04 15:16:13 Vadim

哈哈哈爽抓:) –

使用javascript for語句創建一串縮略圖鏈接

回答

相關問題