Javascript:Change<；a href>；匹配<；img src>；在一页上多次

我正在尝试编写一个脚本，该脚本将采用“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> 

当我运行该命令时，会出现以下错误：

---

未捕获的TypeError:无法读取未定义的属性“src”，该属性引用的是

var url=copy[i].src。我不确定我的脚本是否是我想做的事情的最佳选择，但我现在被难住了。我对JS比较陌生，所以任何帮助都将不胜感激。提前谢谢。如果我需要澄清任何事情，请让我知道。
返回的
节点列表
，因此我怀疑您需要使用
.getAttribute（“src”）
。
返回的
节点列表
，因此我怀疑您需要使用
.getAttribute（“src”）
。
您需要使用
document.querySelectorAll（'.album img'））
（您在
相册img
前面缺少一个
），否则您将搜索带有标记名
相册img
的元素

您的
document.querySelectorAll（'album-img'）
将返回一个空的节点列表，因为html代码中没有标记名为
album img
的元素，并且因此对
copy[i]
的每次访问都将返回
未定义的

但无论如何，我会使用另一种方法。我将搜索所有图像，然后检查每个图像是否位于
元素的内部，如果是这种情况，则更改该元素的
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;
  }
}

函数查找最近的（el）{
while（el）{
如果（el.tagName=='A'）返回el；
el=el.parentNode；
}
}
var images=document.querySelectorAll（'.album img'）；
对于（var i=0；i
您需要使用
document.querySelectorAll（'.album img'）
（您在
相册img
前面缺少一个
），否则您将搜索带有标记名
相册img
的元素

您的
document.querySelectorAll（'album-img'）
将返回一个空的节点列表，因为html代码中没有标记名为
album img
的元素，并且因此对
copy[i]
的每次访问都将返回
未定义的

但无论如何，我会使用另一种方法。我将搜索所有图像，然后检查每个图像是否位于
元素的内部，如果是这种情况，则更改该元素的
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;
  }
}

函数查找最近的（el）{
while（el）{
如果（el.tagName=='A'）返回el；
el=el.parentNode；
}
}
var images=document.querySelectorAll（'.album img'）；
对于（var i=0；i
您最好使用一个数据属性，这样您就可以只针对过程中涉及的图像，因此跳过图标等任何内容

因此，您的img标签将更改为：

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



然后在js中：

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

（函数（）{
var imgs=document.querySelectorAll（'img[数据复制目标]）；
对于（变量i=0，len=imgs.length；i

将脚本粘贴在页面底部（在结束正文标记之前），以确保仅在加载DOM的其余部分时执行脚本

我没有正确地测试上述代码，但其原理是正确的

我在JS中使用的方法是将其包装在一个自动执行的闭包中
您最好使用一个数据属性，这样您就可以只针对过程中涉及的图像，因此跳过图标等任何内容

因此，您的img标签将更改为：

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



然后在js中：

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

（函数（）{
var imgs=document.querySelectorAll（'img[数据复制目标]）；
对于（变量i=0，len=imgs.length；i

将脚本粘贴在页面底部（在结束正文标记之前），以确保仅在加载DOM的其余部分时执行脚本

我没有正确地测试上述代码，但其原理是正确的

我对JS使用的方法是将其封装在一个自动执行的闭包中
正如@Ian Devlin和@t.niese所指出的，我有两个问题需要解决。首先，my
var url=copy[i].src未定义。为什么？因为我的
var copy=document.querySelectorAll（'.album img'）中缺少一个
相册img的位置。其次，我无法获取
var url=copy[I].src中的
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;
    }
}


window.onload=函数abc（）{
var copyto=document.querySelectorAll（'.img container alt'）；
var copy=document.querySelectorAll（'.album img'）；
对于（var i=0；i


谢谢大家的帮助。
正如@Ian Devlin和@t.niese所指出的，我有两个问题需要解决。首先，my
var url=copy[i].src未定义。为什么？因为我的
var copy=document.querySelectorAll（'.album img'）中缺少一个
相册img的位置。其次，我无法获取
var url=copy[I].src中的
src
，因此我们将其切换为
copy[i].getAttribute（“s