세미프로젝트) 제목 클릭시 맨 위에 있는 리뷰내용만 보여짐. 리뷰 내용이 undefiend로 잡히는 문제

이걸로 한 반나절 날려먹은것 같다. 

 

리뷰 제목을 꽁! 누르면 각각의 리뷰 내용이 아코디언으로 내려와야하는데, 맨 처음에 있는 리뷰내용만 나오고 아래는 안나온다.....................

 

F12를 눌러서 확인해보면 제대로 리뷰내용들이 들어가있긴 했다.

 

그래서 javascript를 사용하기로 했다.

 

1. 각 리뷰 한 줄 당의 ID값을 부여한다. 부여하는 ID값 끝에 el태그로 가져온 ID값을 부여함.

// 클릭하면 리뷰내용 보여줄 리뷰 제목
<td class="reviewTitle rsub" id="rsub-${r.reviewNo}">

//리뷰 내용
<div class="review_content" id="review_content-${r.reviewNo}">

 

클릭 이벤트를 처음에는 index로 처리할 생각이었는데 서로 index가 반대로 부여되어있고, 제목 클릭시 리뷰 내용을 못찾고 계속 undefined가 나와버리는 문제가 발생했다...ㅠㅠ 

 

그래서 리뷰 제목 id만 찾고

그 리뷰 제목id 라면? 부모를 타고 거슬러 올라가 부모의 형제인 리뷰내용을 보여주기로 맘먹었다! ^^

 

$("body").on("click", "[id^=rsub-]", function(event) {    
        var vId = this.id;
	var v = document.getElementById(vId);
	var vParent = v.parentNode.parentNode.parentNode.nextSibling.nextSibling;
	console.log(vParent);
	var pId = vParent.id;
	var p = document.getElementById(pId);
	console.log(p);
	if(p.style.display === "block"){
		p.style.display = "none";
	}else {
		p.style.display = "block";
	}
	
 });

click 이벤트도 앞에는 같고 뒤에 rsub - 다음 부분만 다 다르기 때문에 바디태그에 걸어서 했음.

 

부모 태그 찾으러 올라가는데 그냥 그 태그만 보고 올라가면 text라는 것을 보게되는데~~

어? 여기여야하는데지만 거기서 한번 더 가야 해당 태그가 나온다!!