HTML - 앨범목록
앨범목록을 불러온다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>앨범목록</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="common.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.js"></script>
<style>
#top {
border-bottom: 4px #02343F solid ;
}
#albums{
padding: 30px;
}
#page h4 {
border-bottom:1px #02343F dotted;
margin: 10px;
color: #02343F;
margin-top: 20px;
cursor: pointer;
}
#photos{
overflow: hidden;
margin:30px;
}
#photos .box{
float: left;
width:200px;
}
</style>
</head>
<body>
<div id ="page">
<div id ="top">
<h1>앨범목록</h1>
</div>
<div id ="center">
<div id ="albums"></div>
<script id="temp" type="text/x-handlebars-template">
<h4>
<span class="id"></span>
<span class ="title"></span>
</h4>
</script>
<!--사진목록-->
<div id ="photos"></div>
<script id="temp1" type="text/x-handlebars-template">
<div class ="box">
<center>
<img src ="">
</center>
<h3>[] </h3>
</div>
</script>
</div>
</div>
</body>
<script>
getAlbums();
//앨범을 클릭했을경우
$("#albums").on("click" ,"h4",function(){
let albumid = $(this).find(".id").html();
$.ajax({
type : "get",
dataType : "json",
url: "https://jsonplaceholder.typicode.com/photos",
success:function(data){
let newData=[];
$(data).each(function(){
let id = this.albumId;
let photoid = this.id;
let start = (id-1)*50 +1;
let end = start +3;
if(id==albumid && photoid >= start && photoid<=end) newData.push(this);
});
let template = Handlebars.compile($("#temp1").html());
$("#photos").html(template(newData));
}
});
});
function getAlbums(){
$.ajax ({
type :"get",
dataType :"json",
url : "https://jsonplaceholder.typicode.com/albums",
success:function(data){
let newData =[];
$(data).each(function(){
let id=this.id;
if(id<=5) newData.push(this);
});
let template = Handlebars.compile($("#temp").html());
$("#albums").html(template(newData));
}
});
}
</script>
</html>
이미지와 글을 class box 넣어서 id photos 에 넣어 center 앨범목록 안에 넣었다.
클릭을 했을경우 이미지 4개를 불러온다.
댓글남기기