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 并将其复制到上面的 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 returns a Nodelist of element objects 所以我怀疑您需要改用 .getAttribute("src")。

Answer 2

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

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

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

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

我对JS使用的方法是将其包装在一个自执行的闭包中

Answer 4

正如@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;
    }
}

感谢大家的帮助。

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

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

html

javascript

image

href

src