如何使用jQuery获取图片alt属性并添加至其他行及hover时获取当前图片alt

嘿，针对你提到的两个jQuery相关的需求，我来一步步给你拆解解决方案，都是日常开发中很常用的场景，放心抄作业就行😉

不管你是要处理单张图片还是批量操作，核心思路都是先拿到图片的alt属性值，再把它插入到目标元素里。

单张图片的简单场景 #

假设你有一张指定ID的图片，要把它的alt内容放到某个展示区域：

// 先获取目标图片的alt属性值
const imgAltText = $('img#my-target-image').attr('alt');
// 把值插入到指定的div/p/span里，这里用text()保证纯文本安全
$('div#alt-display-box').text(imgAltText);

批量处理多张图片 #

如果页面里有一组图片，要把每张的alt对应加到它旁边的元素（比如每个图片下方的说明框），可以用each()遍历：

$('img.gallery-item').each(function() {
  // 这里的this就是当前遍历到的图片元素
  const currentAlt = $(this).attr('alt');
  // 假设每个图片后面跟着一个带.alt-caption类的元素，把alt放进去
  $(this).next('.alt-caption').text(currentAlt);
});

这个需求需要给图片绑定鼠标悬停事件，实时获取当前触发事件的图片的alt值，再更新到目标位置。

静态图片的情况 #

如果页面里的图片是一开始就加载好的，直接用hover()方法绑定事件就行：

// 给所有带.random-alt类的图片绑定悬停事件
$('img.random-alt').hover(
  // 鼠标移入时的操作
  function() {
    const hoveredAlt = $(this).attr('alt');
    // 把alt值放到指定的展示位置，比如页面顶部的提示栏
    $('span#hover-tip').text(hoveredAlt);
  },
  // 可选：鼠标移出时清空提示内容
  function() {
    $('span#hover-tip').text('');
  }
);

动态加载图片的情况（重要！） #

如果你的图片是后续通过AJAX、动态渲染等方式添加到页面的，直接绑定事件会失效，这时候要用事件委托：

// 把事件绑定到父元素（这里用document作为兜底，最好用更接近的父容器）
$(document).on('mouseenter', 'img.random-alt', function() {
  const hoveredAlt = $(this).attr('alt');
  $('span#hover-tip').text(hoveredAlt);
});

// 移出时清空的话同样用事件委托
$(document).on('mouseleave', 'img.random-alt', function() {
  $('span#hover-tip').text('');
});

这样不管什么时候新增的图片，只要匹配选择器，悬停事件都会生效。

内容的提问来源于stack exchange，提问作者Erekle M.