使用javascript將圖片替換為替代文本

Question

到目前為止，我發現了如何用html頁上的另一個元素替換元素。 但是我的功能以一種奇怪的方式工作。 首先，它替換了第一張和第三張圖片。 如果我再次調用它，它將僅替換第二個圖像。 再次按下按鈕，最后將替換最后的第四張圖像。 有人對此有任何想法嗎？ 來源： http : //pastie.org/5502630 ，在這里您可以看到它的工作原理： http : //clubnights.square7.ch/webtech/a2.html

Answer 1

您在遍歷圖像列表時對其進行了修改。 因此，當您嘗試訪問圖像數組時，它並不是您想的那樣！ 下面是一個可能的解決方法。

    function Convert()
    {
            images = window.document.getElementsByTagName('img');
            var num_images = images.length;
            for (var i = 0; i < num_images; i++)
            {
                    var image = images[0];
                    textReplacement = document.createTextNode(image.getAttribute('alt'));
                    image.parentNode.replaceChild(textReplacement, image);
            }
    }

Answer 2

每次通過for循環時，都將從images[]數組中刪除第一張圖像。 這將同時更改數組內容和設置為循環條件的數組長度。

例如，您的第一個循環刪除了images[0]和ausdruck_1.gif，但是現在images.length等於3，而不是4，現在數組的內容是：

images[0]=ausdruck_2.gif
images[1]=ausdruck_3.gif
images[2]=ausdurck_4.gif

第二次通過循環會刪除images[1] -現在是ausdruck_3.gif-並將圖像數組的長度進一步更改為2，因此i的下一個增量為2將導致循環退出。

我創建了一個jsfiddle，顯示了將您的for語句更改為的可能解決方案：

for(i = images.length-1; i >=0; i--)

並以相反的順序遍歷圖像。