帶字幕的可選圖像列表

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

剛剛從.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>

刪除 display:none和 position:absolute