Question

下面的JavaScript只替换页面上一个图像的src如何在同一页面上为多个图像执行此操作

<SCRIPT LANGUAGE="JavaScript">

loadImage1 = new Image();
loadImage1.src = "http://4.bp.blogspot.com/-Xzm-yUJ_dz0/Tsj3Q57J2tI/AAAAAAAAAGE/bohLMRj5FCY/s1600/hover.png";

staticImage1 = new Image();
staticImage1.src = "http://3.bp.blogspot.com/--0FurTdrYzg/Tsj3RPXGz4I/AAAAAAAAAGI/mm_4UvmoD-A/s1600/standard.png";

replaceImage1 = new Image();
replaceImage1.src = "http://4.bp.blogspot.com/-oacZCbBUhQ0/Tsj3Qkl4IaI/AAAAAAAAAGA/5_z-2VXKCi8/s1600/clicked.png";

</script>

如果需要，图像HTML在下面。我不介意对图像应用和ID或CLASS：）

<img onMouseOver="image1.src=loadImage1.src;" onMouseOut="image1.src=staticImage1.src;" onmousedown="image1.src=replaceImage1.src;" onmouseup="image1.src=loadImage1.src;" style=width:480px;height:360px;background-image:url('http://i1.ytimg.com/vi/XtNcZnfkL2A/hqdefault.jpg');" name="image1" src="http://3.bp.blogspot.com/--0FurTdrYzg/Tsj3RPXGz4I/AAAAAAAAAGI/mm_4UvmoD-A/s1600/standard.png">

AND / OR有一个更清晰的jquery为此我宁愿使用jQuery，谢谢你！

Answer 1

如果您更愿意使用jQuery，可以使用“attribute equals”选择器按名称选择所有图像：

$("img[name='image1']").attr("src", "newImageSource.png");

如果要为图像添加类属性，可以使用类选择器：

$(".someClass").attr("src", "newImageSource.png");

attr方法将应用于与选择器匹配的所有元素，因此无需迭代匹配的集合。

Answer 2

你可以这样做：向图像添加类，例如;

<img class='someclass' ....

然后使用jQuery，您可以选择具有相同类名的所有图像，例如;

$("img[class='someClass']").each(function() {
   //replace src attribute of each image
   $(this).attr("src", "");
   $(this).attr("src", "your_new_src");
});

希望有所帮助

将javascript应用于所有具有相同名称的图像

2 个答案: