带有字幕的可选图像列表

Question

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

我尝试了以下代码

我该如何实现？ 有没有办法代替李

去别的东西？

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