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

Question

我在我的网站上使用了一个带有表单的外部脚本。 一些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改变班级......

Answer 1

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

Answer 2

如果你想使用jQuery

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

Answer 3

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

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

您可以使用：

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

Answer 4

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

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

关于`getElementsByClassName()

的inormationa

Answer 5

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

$(window).load(function() {

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

});