使用 Javascript 将一个类中的所有图像替换为另一个图像答案

【问题标题】：replacing all images from a class with another image using Javascript使用 Javascript 将一个类中的所有图像替换为另一个图像
【发布时间】：2014-03-14 01:32:17
【问题描述】：

我在我的网站上使用带有表单的外部脚本。一些 css 是可定制的，但例如我不能更改图像。我想用 Javascript 替换一个字段未由另一个字段完成时显示的小图像。

这是带有原始图像的 HTML 代码：

<img class="incorrect-img" count="1" src="http://www.detailsdetails.eu/images/newimg/incorrect.gif"></img>

我正在尝试使用此 Js 代码，但它不起作用...

$(document).ready(function () {

document.getElementsByClassName("incorrect-img").src="MYIMAGE.gif";

});

有谁知道我做错了什么？也许是因为我试图从一个类中更改一个图像，也许它只适用于 ID ？我无法通过 ID 更改班级...

【问题讨论】：

我认为document.getElementsByClassName 返回一个数组
如果你有 $(document).ready() 看起来像的 jQuery，那么使用 jQuery 会更容易。

标签： javascript html image src getelementsbyclassname

【解决方案1】：

document.getElementsByClassName() 返回与类选择器匹配的数组元素，在您的情况下，只有一个图像，因此0 索引可以很好地访问第一个元素。像这样

document.getElementsByClassName("incorrect-img")[0].src="MYIMAGE.gif";

关于`getElementsByClassName()的信息

【讨论】：

【解决方案2】：

document.getElementsByClassName("incorrect-img") 返回一个HTMLcollection，它类似于一个数组，但不完全是。

幸运的是，您可以像使用数组一样循环遍历它：

var elems = document.getElementsByClassName("incorrect-img");
for (var i = 0; i < elems.length; i+= 1) {
    elems[i].src = "MYIMAGE.gif";
}

【讨论】：

【解决方案3】：

由于您已经在使用 jQuery，而不是：

document.getElementsByClassName("incorrect-img").src="MYIMAGE.gif";

你可以使用：

$(".incorrect-img").attr("src", "MYIMAGE.gif");

【讨论】：

【解决方案4】：

如果你想使用 jQuery

$(document).ready(function () {
    $( ".incorrect-img" ).each(function( index ) {
        $(this).attr('src', 'MYIMAGE.gif');
    });
});

【讨论】：

【解决方案5】：

非常感谢。我结合了你的答案。这是我的最终代码：

$(window).load(function() {

var image = $(".incorrect-img");
for (var i = 0; i < image.length; i++) {
image[i].src="incorrect_2.gif";
}

});

【讨论】：