如何通过点击图片动态更新下方描述文本-js教程-PHP中文网

如何通过点击图片动态更新下方描述文本

本文介绍一种简洁高效的实现方式：利用图片的 alt 属性存储描述文本，通过 JavaScript 监听点击事件，动态更新指定元素的内容，同时添加视觉反馈（如缩放和阴影），兼顾可访问性与用户体验。

本文介绍一种简洁高效的实现方式：利用图片的 `alt` 属性存储描述文本，通过 javascript 监听点击事件，动态更新指定 `

` 元素的内容，同时添加视觉反馈（如缩放和阴影），兼顾可访问性与用户体验。

要实现“点击不同图片时下方描述文本随之切换”的功能，关键在于语义化存储 + 事件驱动更新。HTML 中的 alt 属性本就用于提供图像的替代文本，既符合无障碍（A11Y）规范，又天然适合作为描述数据源——无需额外 DOM 属性或 JSON 配置。

首先，在 HTML 中为每张图片设置有意义的 alt 值，并为描述容器添加唯一 ID（如 id="img-desc"）：

<img class="personajes_edge" src="//picsum.photos/80" alt="主角：艾拉，勇敢的森林守护者"><img class="personajes_edge" src="//picsum.photos/81" alt="导师：老橡树，智慧与耐心的化身"><img class="personajes_edge" src="//picsum.photos/82" alt="反派：暗影藤蔓，侵蚀记忆的古老存在"><img class="personajes_edge" src="//picsum.photos/83" alt="伙伴：萤火虫小光，带来希望的微光"><img class="personajes_edge" src="//picsum.photos/84" alt="神秘信物：月光罗盘，指引失落真相"><img class="personajes_edge" src="//picsum.photos/85" alt="场景：回声山谷，回荡着被遗忘的誓言"><img class="personajes_edge" src="//picsum.photos/86" alt="结局伏笔：星尘之种，尚未萌发的命运"><p id="img-desc">点击任意角色查看介绍</p>

接着，使用现代 JavaScript 实现逻辑：获取所有图片元素与描述容器，为每张图绑定点击事件，并在触发时同步更新文本及激活状态：

天工AI

天工AI是一款由昆仑万维推出的多能力 AI 智能助手与超级智能体工具。

下载

const images = document.querySelectorAll('.personajes_edge');
const descEl = document.querySelector('#img-desc');

function updateDescription(clickedImg) {
  // 移除所有图片的激活态，仅给当前点击的图片添加 is-active 类
  images.forEach(img => img.classList.toggle('is-active', img === clickedImg));
  // 将当前图片的 alt 文本设为描述内容
  descEl.textContent = clickedImg.alt || '无描述信息';
}

images.forEach(img => img.addEventListener('click', () => updateDescription(img)));

配套 CSS 提供直观反馈，增强交互体验：

.personajes_edge {
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  margin: 0 4px;
}

.personajes_edge.is-active {
  transform: scale(1.12);
  box-shadow: 0 0.25rem 1.2rem rgba(0, 0, 0, 0.3);
  z-index: 2;
}

⚠️ 注意事项：