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)＆amp; ; :nth-child(4)。我添加了javascript标签，虽然我对（如果它甚至可能）任何非JavaScript解决方案持开放态度。

修改

我能够改变构成最后两个图像的底部的类，html反映：

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

选择链接的页面加载后更改图像源

1 个答案: