带字幕的可选图像列表

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