我希望更改页面加载后应用程序生成的两个图像源。当前发生的情况是应用程序正在从本地网站的集合中加载 4 张图像,所有这些图像都是拇指大小的版本。我正在尝试更改页面加载后生成的这些链接,以便最后 2 个图像加载正常大小的图像。它使用的文件结构是..../small/img
,我需要将其更改为..../large/img
。我没有找到很多关于如何对图像源执行此操作的信息,因此我转向 SO。谢谢!
额外
我已经找到了看似正确的解决方案,但仍然没有达到目标。希望这可以帮助有人给我一个可靠的答案。
function changeImage(img) {
document.getElementById("img").src = img.src.replace("small", "large");
}
我可能完全不正确,但如果这样做的话,那么最后一步只是弄清楚如何定位最后两个图像而没有任何唯一的ID,类似于我猜想的CSS选择器 :nth- child (3)
&:第n个 child (4)
。我已经添加了 javascript 标签,但我愿意(如果可能的话)任何非 javascript 解决方案。
编辑
我能够更改构成最后两个图像的底部部分的类,html 反射(reflect):
<div class="parent1">
<a>
<img />
</a>
</div>
<div class="parent1">
<a>
<img />
</a>
</div>
<div class="parent2">
<a>
<img />
</a>
</div>
<div class="parent2">
<a>
<img />
</a>
</div>
最佳答案
d您提供的 JavaScript 代码的问题在于您使用了 getElementById()
函数来获取每个图像。为了获得有效的 HTML,该 ID 在任何网页上不得出现多次。
相反,您可以使用一个类并通过以下方式选择它们:document.getElementsByClassName('myImages')
<img class="myImages" src="..."/>
<img class="myImages" src="..."/>
<img class="myImages" src="..."/>
<img class="myImages" src="..."/>
或者您可以通过标签名称来选择它们:document.getElementsByTagName('img')
使用此选项,您需要注意网页上没有其他图像。
至于更改源代码,您提供的代码已经差不多了,唯一缺少的是您需要依次循环每个元素。
var parent = document.getElementsByClassName('randomClass');
var images = parent[0].getElementsByTagName('img');
for (var i = 2; i < images.length; i++) {
var src = images[i].src;
images[i].src = src.replace("small", "large");
}
Here is a fiddle为了进行演示,您需要右键单击并检查元素,以便在页面加载后查看更改后的 src。
编辑
考虑到额外的 HTML 标记,以下 javaScript 代码应提供所需的结果 ( fiddle ):
var parent = document.getElementsByClassName('parent2');
for (var i = 0; i < parent.length; i++) {
var image = parent[i].getElementsByTagName('img');
var src = image[0].src;
image[0].src = src.replace("small", "large");
}
关于javascript - 页面加载后更改所选链接的图像源,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29706124/