more_icon을 눌렀는데...ㅠ

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');
  
}
인프런 커뮤니티 질문&답변
