javascript - 页面加载后更改所选链接的图像源

Question

我希望更改页面加载后应用程序生成的两个图像源。当前发生的情况是应用程序正在从本地网站的集合中加载 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>

Answer 1

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