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>
#posts {
padding: 30px;
}
#info, #comments{
color: #02343F;
padding: 30px;
}
#posts .title {
border-bottom: 1px dotted #02343F;
color: #02343F;
margin-bottom: 20px;
cursor: pointer;
}
#page .p2, .p3, .p4{
text-align: center;
margin:20px auto;
}
</style>
</head>
<body>
<div id ="page">
<div id ="top">
<h1 class ="p1" style = >게시글관리</h1>
</div>
<div id ="center">
<h3 class ="p2">게시글목록</h3>
<div id ="posts"></div>
<script id="temp" type="text/x-handlebars-template">
<h4 class="title">
[<span class ="id"> </span>]
<span ></span>
</h4>
</script>
<h3 class ="p3" >게시글정보</h3>
<div id ="info"></div>
<script id="temp1" type="text/x-handlebars-template">
<h4>[] </h4>
<p></p>
</script>
<h3 class ="p4">게시글댓글</h3>
<div id ="comments"></div>
<script id="temp2" type="text/x-handlebars-template">
<h4>[] </h4>
<p></p>
</script>
</div>
<div id ="bottom">
<h5>CopyRight 2022. 강깸 All Right Reserved.</h5>
</div>
</div>
</body>
<script>
getPosts();
//posts 안에 h4 를 클릭한 경우 id 값 posts 안에 h4를 클릭했을때 작업을 하겠다.
$("#posts").on("click","h4",function(){
let postid =$(this).find(".id").html(); //this (h4)에서 클래스네임이 아이디인걸찾아서 html에 들은값을가져옴
//게시글정보
$.ajax({
type: "get",
dataType :"json",
url:"https://jsonplaceholder.typicode.com/posts/"+ postid,
success: function(data){
let template = Handlebars.compile($("#temp1").html());
$("#info").html(template(data));
//댓글 목록
$.ajax({
type: "get",
dataType: "json",
url: "https://jsonplaceholder.typicode.com/comments?postId="+ postid,
success: function(data){
let template = Handlebars.compile($("#temp2").html());
$("#comments").html(template(data));
}
});
}
});
});
//목록출력함수
function getPosts(){
$.ajax({
type: "get",
dataType: "json",
url : "https://jsonplaceholder.typicode.com/posts",
success: function (data){
let newData =[];
$(data).eachfunction(){
let id = this.id;
if(id<=5) newData.push(this);
});
let template = Handlebars.compile($("#temp").html());
$("#posts").html(template(newData));
}
});
}
</script>
</html>
목록출력은 5이하로 해서 5개만 출력이된다.
댓글남기기