如何设置<img>alt标记

How to set <img> alt tag from another piece of HTML in the same page

本文关键字：img gt alt 标记 何设置 lt 设置      更新时间：2024-02-01

我有一个网站，它是在我对这项业务了解比现在更少的时候建立的。该网站包含大约200页和数千张图片。显示它们的HTML通常如下所示：

<div class="pic">
<a onclick="loadImage('filename.jpg')" href="#4"><img   src="filename.jpg" alt="missing img"></a>
<div class="imgcapt"><i>Caption</i></div>
</div>

这会在页面上放置一张图片，并在下方添加标题。单击图像会在新窗口中打开图像的较大版本。大多数图片都有字幕，但并非所有图片都有。

我想做的是用imgcapt-div（存在的地方）的内容替换现有的alt文本。理想情况下，我想在源文件中这样做，但如果这不可能，那么添加一些JavaScript，在页面加载时这样做。我看过类似问题的各种答案，但找不到任何匹配的答案。有人能为我指出这两种方法的正确方向吗？

不需要jquery，您可以查看您的document.querySelector（'div.imgcapt'）.innerHTML。imgcapt元素´并使用element.setAttribute 设置alt标签

首先，不应该使用内联HTML事件处理程序（onclick=...），因为它们创建了意大利面条代码，导致全局匿名函数代理修改了this绑定，并且不遵循DOM事件标准。

其次，你根本不需要把你的图像包装在锚标签中。只需将图像的点击事件连接到您的函数即可。

所以，这样就可以了：

window.addEventListener("load", function(){
  var imgs = document.querySelectorAll("img");
  
  for(var i = 0; i < imgs.length; ++i){
     imgs[i].addEventListener("click", function(){
        window.location = this.getAttribute("data-path");
        loadImage("fileName.jpg");
        this.alt = this.nextElementSibling.firstChild.innerHTML;
        alert(this.alt);
     });
  }
  function loadImage(path){
    window.open(path);
  }
  
});
<div class="pic">
  <img src="filename.jpg" alt="missing img" data-path="#4">
  <div class="imgcapt"><i>Caption</i></div>
</div>

您可以尝试使用jQuery选择所有具有pic类的div

然后，对于每个匹配，在imgcapt类中获取i的文本，并将属性alt设置为

$( document ).ready(function() {
    $('.pic').each(function(el) {
    var imgCaption = $(this).find('i').text();
    $(this).find('img').prop('alt', imgCaption);
  })
});

这是一把小提琴https://jsfiddle.net/3vmd92zr/

相关文章：