如何通过jQuery实现点击图片时添加文本描述？

我来帮你搞定这个需求！基于你现有的点击显示大图及遮罩的代码，只需要简单几步就能实现点击图片时展示对应文本描述的功能，具体步骤如下：

1. 完善HTML结构 #

首先我们需要给每个小图添加存储描述的数据源，同时在大图容器里新增一个用于展示描述的元素：

<div class="filternav">
  <!-- 给列表里的每个img加上data-description属性存储描述 -->
  <div class="portfolio">
    <img src="small-img-1.jpg" data-description="这是第一张作品的详细描述">
    <img src="small-img-2.jpg" data-description="这是第二张作品的创作背景">
  </div>
</div>

<div class="frameimg">
  <img id="main" src="">
  <!-- 新增用于展示描述的元素 -->
  <div class="img-description"></div>
</div>
<div class="overlay-frame"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

2. 修改jQuery逻辑 #

接下来我们修改现有的点击事件，加入描述文本的获取和展示逻辑：

// 点击小图时的处理逻辑
$('.portfolio img').on('click', function() {
  var src = $(this).attr('src');
  // 从data属性中获取当前图片的描述文本
  var imgDesc = $(this).data('description');
  
  $('#main').attr('src', src);
  // 将描述文本插入到对应的展示元素中
  $('.img-description').text(imgDesc);
  
  $('.frameimg').fadeIn();
  $('.overlay-frame').fadeIn();
});

// 点击遮罩关闭时的处理逻辑
$('.overlay-frame').on('click', function() {
  $(this).fadeOut();
  $('.frameimg').fadeOut();
  // 可选：清空描述内容，避免下次打开时显示残留文本
  $('.img-description').text('');
});

3. 可选：添加CSS美化描述样式 #

为了让描述显示更美观，你可以给.img-description加一些定位和样式：

.img-description {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 10px 20px;
  border-radius: 4px;
  font-size: 14px;
  max-width: 80%;
  text-align: center;
}

.frameimg {
  position: relative; /* 确保描述元素能相对于大图容器定位 */
}

这样一来，当你点击任意小图时，不仅会弹出大图和遮罩，还会在大图的指定位置显示对应的文本描述啦！

内容的提问来源于stack exchange，提问作者meca novovic