210223 - 25일차

체크리스트

1. 상품 상세 페이지 댓글 부분

   1) 한번에 10개의 댓글을 불러오고, 더보기 버튼을 만들어 클릭할 때 10개씩 더 불러온다. 현재 페이지(rcp)와 페이지사이즈(rps) 데이터가 필요함.

   2) 등록일(sql.Date 타입)을 jsp에서 이쁘게 표현하는 방법 찾기

작업내용, 에러해결

1. 동적으로 추가되는 html 요소에 이벤트 바인딩이 안됨.

   1) 댓글을 ajax로 처리해주는 데, 추가된 html 요소에 이벤트가 걸리지 않았음

   2) 기존의 코드 : $(document).ready(function(){ 이벤트 처리 로직 });

   3) 해결후 코드 : $(document).on("이벤트", "선택자 ", function(){ 이벤트 처리 로직 });

   4) 참조 : https://sassun.tistory.com/134

//기존 요소의 이벤트 처리	
$(document).ready(function(){ 
	$("button").click(function(){
    
    });
});

//동적으로 추가된 요소의 이벤트 처리
$(document).on("click","button",function(){

});

2. 위의 방식으로 대댓글 쓰는 입력폼 열고닫는 스크립트와, 댓글 더보기 스크립트를 만들어 주었다. 둘 다 버튼을 클릭할 때, ajax로 새로운 html 요소가 추가된다.

3. $().toggleClass() 를 이용함.

//대댓글 입력 폼 보이게 하기
$(document).on("click",".re-reply[seq]",function(){
	let bSeq = $(this).attr("seq");
	$("div[seq="+bSeq+"]").toggleClass("show");

});

// 1. <div class="input-element re-reply-input">
// 2 .<div class="input-element show">
// 토글클래스 함수로 div의 클래스 이름이 클릭마다 1, 2로 바뀜.

.input-element.re-reply-input{
	display : none;
}
.input-element.show{
	display : block;
}

<div class="reply-and-like">                       
  <button class="re-reply" seq="${bookReview.br_seq}">댓글 </button>
  <button id="re-like-it">좋아요!</button>
</div>

<-- 각각의 댓글 버튼과 숨길 div를 매핑하기 위해 임의로 seq 라는 속성을 부여했는데..... 문제가 없는 방법일지 모르겠음. -->

<div class="input-element re-reply-input" seq="${bookReview.br_seq}">
   <div class="comment-form-comment">
      <textarea name="br_comment" cols="40" rows="8"></textarea>
   </div>
   <div class="comment-submit">	
      <input type="submit" class="submit" id="re-submit" value="댓글 작성">
      <input type="button" class="submit" id="re-del" value="삭제">
      <input type="button" class="submit" id="re-up" value="수정">
   </div>
</div>