Javascript：更改 <a href> 以在页面上多次匹配 <img src>

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 并将其复制到 div 中它上方的 a href。这是我到目前为止所做的 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>

当我运行它时，我得到了这个错误： Uncaught TypeError: Cannot read property 'src' of undefined，指的是var url = copy[i].src;。我不确定我的脚本是否是我正在尝试做的最佳选择，但我现在很难过。我对 JS 比较陌生，所以任何帮助将不胜感激。提前致谢。如果我需要澄清任何事情，请告诉我。

Answer 1

正如@Ian Devlin 和@t.niese 所指出的，我有两个问题需要解决。首先，我的var url = copy[i].src; 未定义。为什么？因为我在var copy = document.querySelectorAll('.album-img'); 中缺少.，而album-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;
    }
}

感谢大家的帮助。

Answer 2

您需要使用document.querySelectorAll('.album-img')（您在album-img 前面缺少.），否则您将搜索标签名称为album-img 的元素。

您的document.querySelectorAll('album-img') 将返回一个空节点列表，因为在您的html 代码中没有标签名称为album-img 的元素，因此每次访问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 3

你最好使用数据属性，这样你就可以只定位过程中涉及的图像，因此跳过图标等任何东西

所以，你的 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;
    }
})();

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

上面的代码我没有正确测试过，但原理是正确的

我对 JS 使用的方法是把它包装在一个自动执行的闭包中

Answer 4

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