javascript - 带字幕的可选图像列表

Question

我有一个可选择的图像列表，我需要在每个图像项的正下方显示标题(例如:第一个元素下方的 Caption1 等等)。

我试过下面的代码

我如何实现它？有没有办法从 li 替换

为了别的什么？

$('.images_list li').click(function() {
  $('.images_list .selected').removeClass('selected');
  $(this).toggleClass('selected');
  var clicked = $(this).attr('title');
  $("#"+clicked).removeClass("hidden").siblings().addClass("hidden");
});

.images_list li {
  list-style: none;
  float: left;
  width: 125px;
  height: 72px;
  margin-right: 10px;
  padding:5px
}

.images_list li span {
  display:none;
  position:absolute;
  top:0px;
  left:0px;
  width:24px;
  height:24px;    
}

.border {
  border: 1px solid #D8D8D8;
}
.selected {
  border: 2px solid #999999;

}
.hidden {
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="images_list">
    <li class="border" title="content_1">
        <img src="https://t.pimg.jp/icon/029/957/563/29957563.jpg" />
        <span>
      <img src="" />
      <span>Caption1</span>
        </span>
    </li>
    <li class="border" title="content_2">
        <img src="https://t.pimg.jp/icon/029/957/563/29957563.jpg" />
        <span>
          <img src="" />
      <span>Caption2</span>
        </span>
    </li>
</div>
<div class="img_info">
    <div id="content_1" class="content hidden">content1</div>
    <div id="content_2" class="content hidden">content2</div>
</div>

Answer 1

只需从 .images_list li span 中删除 display:none 和 position:absolute

$('.images_list li').click(function() {
  $('.images_list .selected').removeClass('selected');
  $(this).children('img').toggleClass('selected');
  var clicked = $(this).attr('title');
  $("#"+clicked).removeClass("hidden").siblings().addClass("hidden");
});

.images_list li {
  list-style: none;
  float: left;
  width: 125px;
  height: 72px;
  margin-right: 10px;
  padding:5px
}

.images_list li span {
  width:24px;
  height:24px;    
}

.border {
  border: 1px solid #D8D8D8;
}
.selected {
  border: 2px solid #999999;

}
.hidden {
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="images_list">
    <li class="border" title="content_1">
        <img src="https://t.pimg.jp/icon/029/957/563/29957563.jpg" />
        <span>
      <img src="" />
      <span>Caption1</span>
        </span>
    </li>
    <li class="border" title="content_2">
        <img src="https://t.pimg.jp/icon/029/957/563/29957563.jpg" />
        <span>
          <img src="" />
      <span>Caption2</span>
        </span>
    </li>
</div>
<div class="img_info">
    <div id="content_1" class="content hidden">content1</div>
    <div id="content_2" class="content hidden">content2</div>
</div>