Javascript:在页面上多次更改 以匹配

Question

我正在尝试编写一个脚本，该脚本将获取“img src”并将其复制到“a href”。诀窍在于，我正在处理的这个页面是一个照片库，该脚本需要处理的页面上有多个图像。这需要在页面加载后立即发生。这是我的 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> 

正如我所说，技巧是让它运行多个与此相同的 div，并动态抓取每个 img src 并将其复制到 a href 在 div 内。这是我到目前为止所做的 JS:

    <!-- 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>

当我运行该程序时，出现以下错误: 未捕获的类型错误:无法读取未定义的属性“src”，该属性引用了 var url = copy[i].src;。我不确定我的脚本是否是我想做的事情的最佳选择，但我现在很困惑。我对 JS 比较陌生，所以任何帮助将不胜感激。提前致谢。如果我需要澄清任何事情，请告诉我。

Answer 1

getQuerySelector返回 element objects 的 Nodelist所以我怀疑您需要使用 .getAttribute("src") 代替。