-
질문 & 답변
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
more_icon을 눌렀는데...ㅠ
20.08.19 16:15 작성 조회수 98
2
more_icon을 눌렀는데 on이 붙여 지지않습니다.
아그리고 밑에 ajax 함수에 url은 제가 서버를 django로 쓰고 있어서 url을 {% url 뭐시기 %} 이런식으로 달아야하는데 코드가 길어져서 일단 대충 달아둔겁니다.
암튼 on이 붙질않아서 현재 display: none -> display: block이 되질 않네요
function delegationFunc(e){ // event객체를 받는다 ( 결과 : 내가클릭한 html태그가 나옴 ) 클릭한 대상들이 나온다.
let elem = e.target;
console.log(e.target);
// 예외적으로 잘못된 부분을 클릭했을 때를 만들어야한다.
while(!elem.getAttribute('data-name')){ // 아 html 속성중에 data-name자체가 없으면 그냥 함수 end해라 .
elem = elem.parentNode; // elem의 부모 parentNode라는 것을 찾아야한다.
if(elem.nodeName === "BODY"){ // 만약에 찾다가 body라는게 나오면 elem에게 null을 주고 끝내라. nodeName(TagName이라고 생각하셈)
elem = null;
return ; // return 은 이 함수를 자체를 끝내버리는 속성이있다.
}
}
// ## 여기에는 모두 toggle이 들어가야한다. 클래스를 넣다 뺏다 해야한다. ##
// element가 맞냐고 비교를 해야하니까
// 여기서 matches를 할건데 , classname으로 하면 중복될가능성이 있으니까 data_name을 사용 할것이다.
if(elem.matches("[data-name='heartbeat']")){ // html코드의 data-name속성이 heartbeat
// 너가 클릭한 element 대상에 data-name에 heartbeat를 가지고 있으면 이부분을 실행해라.
console.log("하트!");
// 근데 이렇게 하면 console창에 아무것도 나오지 않는다. 왜냐 heart-icon에는 data-name자체가없다. 그래서
//우리가 heart-icon에 추가를 한다. data-name을 iconsField에 icons를 모두 data-name을 추가해보도록하자
$.ajax({// ajax를 이용해서 좋아요를 눌렀을 때 1이 증가하는 모습을 web으로 보여주자
type: "POST",
url: "../data/like.json",
data: 37,
dataType: 'json', // 우리가 생각하는 그런 데이터 타입이 맞고 보통 json데이터 타입을 많이씀
success: function(response){ //위에 있는 type , url 등등이 성공적으로 통신이 되었을때 실행해라
console.log("response 지나감");
let likeCount = document.querySelector("#like-count-37");
likeCount.innerHTML = "좋아요"+response.liek_count+"개";
},
error: function(request , status , error){ // error 가 났을 경우를 대비하여 이렇게 예외처리를 해야한다.
alert("로그인이 필요합니다.");
// window.location.replace("");
}
})
}else if(elem.matches("[data-name='bookmark']")){
console.log("북맠!");
let pk = elem.getAttribute("name");
$.ajax({
type: 'POST',
url: "../data/bookmark.json",
data: 37,
dataType: 'json',
success: function(response){
let bookmarkCount = document.querySelector("#bookmark-count-37");
bookmarkCount.innerHTML = '북마크' + response.bookmark_count + '개';
},
error: function(request , status , error){
alert("로그인이 필요합니다.");
}
})
}else if(elem.matches("[data-name='comment']")){ // 댓글 달기
console.log("진짜");
// 일단 우리가 input에 작성한 글들을 가져올 수가 있어야 한다.
let content = document.querySelector("#add-comment-post-37>input[type=text]").value;
console.log(content);
if(content.length >140){
alert("댓글은 최대 140자까지 입력이 가능합니다. : "+content.length);
return;
}
$.ajax({
type:'POST',
url:'./comment.html',
data:{
'pk' : 37,
'content' : content,
},
dataType: 'html',
success:function(data){
document.querySelector('#comment-list-ajax-post37').insertAdjacentHTML("afterbegin",data);
},
error: function(request , status , error){
alert("문제가 발생했습니다.");
}
});
document.querySelector("#add-comment-post-37>input[type=text]").value = '';
}else if(elem.matches("[data-name='comment-delete']")){
$.ajax({
type: 'POST',
url: "../data/delete.json",
data: {
'pk' : 37,
},
dataType: 'json',
success: function(response){
if(response.status){ // 여기서 status는 delete.json으로 가면
//status가 있는데 그게 1이냐 0이냐에 따라 삭제가 되었냐 안되었냐로 구분을 지을 것이다.
let comt = document.querySelector(".comment-detail");
comt.remove();
}
},
error: function(request , status , error){
alert("문제가 발생했습니다.");
}
})
} else if(elem.matches("[data-name='follow']")){
$.ajax({
type: 'POST',
url: "../data/follow.json",
data:{
'pk' : 37,
},
dataType: 'json',
success: function(response){
if(response.status){
document.querySelector("input.follow").value = '팔로잉' ; // input에 follow라는 클래스가 붙어 있으면
}else{
document.querySelector("input.follow").value = '팔로워' ;
}
},
error: function(request , status , error){
alert("문제가 발생했습니다.");
}
})
}
elem.classList.toggle('on');
}
답변을 작성해보세요.
0
범쌤
지식공유자2020.08.20
안녕하세요 sincc0715님 kindtiger입니다 :)
문의주신 글들을 보아 복합적 에러가 많은것 같아 소스코드를 공유해주시면 확인해보고 답변을 드리도록 하겠습니다 ^^
깃헙에 올리시고 링크를 주셔도 되고 메일로 보내주셔도 되고 편한 방법으로 전체 파일을 보내주세요~~ ㅎㅎ
seonbeom2@gmail.com
답변 1