帶有字幕的可選圖像列表

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>