使用 javascript 将图像替换为 alt 文本答案

【问题标题】：Replace Images by their alt-text using javascript使用 javascript 将图像替换为 alt 文本
【发布时间】：2012-11-27 04:14:19
【问题描述】：

到目前为止，我发现了如何用 html 页面上的另一个元素替换元素。但是我的功能以一种奇怪的方式工作。首先它替换了第一张和第三张图片。如果我再次调用它，它只会替换第二个图像。再次按下按钮使最后的第四张图像被替换。有人对此有任何想法吗？来源：http://pastie.org/5502630 在这里你可以看到它是如何工作的：http://clubnights.square7.ch/webtech/a2.html

【问题讨论】：

有没有人知道如何让图片在第二次点击时再次出现？

标签： javascript html image text replace

【解决方案1】：

每次通过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--)

并以相反的顺序循环浏览图像。

【讨论】：

另一个类似的解决方案：使用一个while循环，每次都获取列表中的最后一个图像。 jsfiddle.net/VDqGF/3
@Joe Oravec 你对这个解决方案有什么看法？ jsfiddle.net/VDqGF/5我刚刚删除了增量语句

【解决方案2】：

您正在修改图像列表，因为您正在迭代它。因此，当您尝试访问图像数组时，它不是您认为的那样！以下是一种可能的解决方法..

    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);
            }
    }

【讨论】：