Измените источник изображения после загрузки страницы для выбора ссылок

Question

Я ищу изменить два источника изображений, создаваемых приложением после загрузки страницы. В настоящее время приложение загружает 4 изображения из коллекций локального веб-сайта, все из которых являются версиями большого размера. Я пытаюсь изменить эти ссылки, которые генерируются после загрузки страницы для последних двух изображений для загрузки изображений нормального размера. Используемая файловая структура - ..../small/img, и мне нужно изменить ее на ..../large/img. Я не нахожу много информации о том, как это сделать для источников изображений, поэтому я обращаюсь к SO. Благодаря!

ДОПОЛНИТЕЛЬНЫЕ

Я обнаружил, что выглядит то, что в правильном направлении к решению, но все же промахивается на много. Надеюсь, это поможет кому-то дать мне солидный ответ.

function changeImage(img) { 
    document.getElementById("img").src = img.src.replace("small", "large"); 
    } 

я могу быть совершенно неправильно, но если такого рода делает это, то последний шаг просто выяснить, как предназначаться только последние два изображения без какого-либо уникального идентификатора, похоже я думаю, на селектор CSS :nth-child(3) & :nth-child(4). Я добавил тег javascript, хотя я открыт (если это возможно) любые решения, отличные от javascript.

EDIT

Я был в состоянии изменить класс для нижней части, которая составляет последние два изображения, 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 В с яваскрипта код, который вы предоставили что вы использовали функцию getElementById(), чтобы получить каждое изображение. Чтобы иметь действительный HTML, идентификатор не должен встречаться более одного раза на любой веб-странице.

Вместо этого, вы можете использовать класс и выбрать их с помощью: 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"); 
}