Javascript: Change <a href> to match <img src> multiple times on a page

Question

I'm attempting to write a script that will take the 'img src' and copy it to an 'a href'. The trick is that this page I'm working on is a photo gallery, with multiple images on the page that this script needs to work on. This needs to happen as soon as the page is loaded. Here's my HTML:

<!-- Album row 1 --> 
<div class="col-md-6 col-sm-6 album"> 
    <a class = "img-container-alt" href="**this_is_where_the_imgsrc_below/will_end_up.jpg**" data-gallery> 
    <div class="photo-overlay"></div> 
    <figure> 
    <img class="img-responsive album-img" src="**this_is_what_/i_would_like_copied_above.jpg**" alt=""> 
    </figure> 
    </a> 
</div> 

The trick is, like I said, getting it to run through multiple divs that are identical to this one and dynamically grabbing each img src and copying it to the a href above it within the div. Here's what JS I've done so far:

<!-- Script --> 
<script type="text/javascript"> 
window.onload = function abc() { 
    console.log('hello') 
    var copyto = document.querySelectorAll('.img-container-alt'); 
    var copy = document.querySelectorAll('album-img'); 
    for (var i = 0; i < copyto.length; i++) { 
     var url = copy[i].src; 
     copyto[i].href = url; 
    } 
} 
</script> 

When I run that, I get this error: Uncaught TypeError: Cannot read property 'src' of undefined, which is referring to the var url = copy[i].src;. I'm not sure if my script is the best option for what I'm trying to do, but I'm stumped now. I'm relatively new to JS, so any help would be appreciated. Thanks in advance. If I need to clarify anything, please let me know.

Answer 1

Как было отмечено @Ian Девлин и @ t.niese, у меня было две проблемы, которые необходимо быть фиксированным. Во-первых, мой var url = copy[i].src; не был определен. Зачем? Потому что я отсутствовал . в моем var copy = document.querySelectorAll('.album-img');, где album-img был. Во-вторых, я не мог захватить src в var url = copy[i].src;, поэтому мы переключили его на copy[i].getAttribute("src"), и он отлично работал.

Вот рабочий сценарий в настоящее время ....

<!-- Script --> 
    <script type="text/javascript"> 
    window.onload = function abc() { 

    var copyto = document.querySelectorAll('.img-container-alt'); 
    var copy = document.querySelectorAll('.album-img'); 
    for (var i = 0; i < copyto.length; i++) { 

     var url = copy[i].getAttribute("src"); 
     copyto[i].href = url; 
    } 
} 

Спасибо за помощь, ребята.

Answer 2

getQuerySelector возвращает Nodelist из element objects, поэтому я подозреваю, что вам нужно вместо этого использовать .getAttribute("src").

Answer 3

Вы должны использовать document.querySelectorAll('.album-img') (вам не хватает . перед album-img) в противном случае вы будете искать для элементов с именем тега album-img.

Ваш document.querySelectorAll('album-img') возвращает пустой список узлов, потому что нет ни одного элемента с именем тега album-img в вашем HTML коде и из-за того, что каждый доступ к copy[i] вернется undefined.

Но я все равно использовал бы другой подход. Я искал бы для всех изображений, а затем для каждого изображения проверить, если он находится внутри от a элемента, и если это так, то изменить href этого элемента:

function find_closest_a(el) { 
    while (el) { 
    if (el.tagName === 'A') return el; 
    el = el.parentNode; 
    } 
} 

var images = document.querySelectorAll('.album-img'); 
for (var i = 0; i < images.length; i++) { 
    var aElment = find_closest_a(images[i]); 
    if (aElment) { 
    aElment.href = images[i].src; 
    } 
} 

Answer 4

Вы бы лучше использовать данные атрибутов, так что вы можете настроить таргетинг только изображения, участвующих в процессе, поэтому пропуская ничего подобного иконки и т.д.

Итак, ваш IMG тег изменится на:

<img class="img-responsive album-img" src="" alt="" data-copy-target="id_of_relevant_a_tag"> 

затем в ЯШ:

(function() { 
    var imgs = document.querySelectorAll('img[data-copy-target]'); 
    for (var i = 0, len = imgs.length; i < len; ++i) { 
     document.getElementById(imgs[i].dataset.copyTarget).href = imgs[i].src; 
    } 
})(); 

Стик сценарий в нижней части страницы (до закрытия тела тега), чтобы убедиться, что это выполняется только тогда, когда остальная часть DOM загружен

я не правильно проверил код выше, но принцип правилен

метод я использовал для JS, чтобы обернуть его в прямоприменяемых закрытия