자바스크립트 고수님들 질문 드립니다.

Question

div 레이어가 position으로 (앞),(뒤) 에 존재 합니다.

조건 1 . (앞)div 두개가 합쳐저있을때..

조건 2. (앞)div 선택시 해당위치와 같은 위치에 있는 (뒤)div 내용을 알고 싶습니다.

가능 한가요?

• 

Answer 1

실제 HTML 코드를 보여주셔야 정확하게 코드를 짜드릴수있을것같습니다.

구조가 제가 생각하는 구조라면 jQuery로 간단하게 구현은 가능합니다.

앞)div 선택시 해당위치와 같은 위치에 있는 (뒤)div 내용을 알고 싶습니다.

$('article').click(function(){ var index = $("article").index(this); console.log(index); });

해당 코드는 실제 아하 홈페이지에서 몇번째 질문을 클릭한건지 찾아내는 코드입니다.

그럼 이제 여기서 조금 변환을 해보도록 하겠습니다.

$('.front_div li').click(function(){ // 앞 div에서 li tag를 클릭하면 var index = $(".front_div li").index(this); // 클릭한 li가 몇번째 li 인지 index 라는 변수에 담음 console.log(index); // 해당하는 index 의 값을 출력 == 클릭한 앞 div의 li 순서 console.log( $('.back_div li').eq(index).text() ) // 뒤 div 에 index 번째 li 의 text 값을 출력 });

위와 같이 구현하시면 될것으로 보입니다.

정확하게 html 첨부주시면 실제 코드로 다시 리뷰 드리겠습니다^^

Answer 2

위쪽에서 클릭한 칸과 번호가 같은 칸이 아니라 실제 화면 상의 위치가 같은 칸을 찾으시려는 것 같은데요,

가능하긴 합니다만... 좀 복잡합니다.

| · | | | | ·| | | |

두번째 줄이 아래에 가려진 부분, 첫번째 줄이 위에 있어서 화면에 보이는 부분, ·가 클릭한 위치라고 치죠

이 경우에는 뒤에 있는 것 중 첫번째인지, 첫번째와 두번째인지 정해야 합니다. 그리고 여기서 후자라지

| | · | | | | ·| | | | |

완전히 겹치지는 않는 경우에는 어떻게 해야 할지도 정해야 합니다. 두번째? 아니면 첫번째와 두번째?

질문 내용에 설명이 충분하지 않아서 구체적으로 자세한 방법을 설명드릴 수는 없지만

첫번째 예시의 경우에서 첫번째만 나와도 되는 경우에는 이벤트 핸들링 잘 하면 알 수 있는데

나머지 경우에는 (또 각 칸의 크기가 어떻게 되는지에 따라서 다르겠지만) 다른 방법을 써야 합니다.