带标题

Question

我有一个可选择的图像列表，我需要在每个图像项下方显示标题（例如：第一项下面的标题1，依此类推）。

我尝试使用以下代码

我如何实现它？有没有办法从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

从display:none

中删除position:absolute和.images_list li span

$('.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>