本文介绍一种简洁高效的实现方式：利用图片的 alt 属性存储描述文本，通过 JavaScript 监听点击事件，动态更新指定 <p> 元素的内容，同时添加视觉反馈（如缩放和阴影），兼顾可访问性与用户体验。
本文介绍一种简洁高效的实现方式：利用图片的 `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 实现逻辑：获取所有图片元素与描述容器，为每张图绑定点击事件，并在触发时同步更新文本及激活状态：
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;
}⚠️ 注意事项：
- 确保 #img-desc 元素存在且唯一，否则 querySelector 将返回 null，导致脚本报错；
- alt 属性必须提供有意义的文本（而非空字符串或占位符），这对屏幕阅读器用户至关重要；
- 若需支持键盘操作（如 Enter 键触发），建议为图片添加 tabindex="0" 并监听 keydown 事件；
- 在真实项目中，可进一步封装为可复用函数或自定义元素，提升维护性。
该方案轻量、语义清晰、无障碍友好，是图片描述动态切换的经典实践。
