제이쿼리 직계자손만 잡기..질문

속상함

프로필 보기 작성한 질문 작성한 답변 전체 작성글 보기 전체 댓글 보기

2023-07-13 (목) 23:43:52 2,004

안녕하세요~

lightbox를 이용해서 이미지를 클릭하면 갤러리고 보이는걸 사용하는데요,

지금 현상황은 .content-view 라는 클래스 div에 모든 자식 태그 img 가 자동으로 클릭이 되고, 클릭하면 라이트박스가 뜨는건데..

Copy

<!--- 이건 그냥 -->

https://cdnjs.cloudflare.com/ajax/libs/lity/2.4.1/lity.min.js

https://cdnjs.cloudflare.com/ajax/libs/lity/2.4.1/lity.css

<!--- 이건 그냥 -->

 

  <script>
   const ENTRY_CONTENT = document.querySelector('.content-view');
   const ALL_IMAGES = ENTRY_CONTENT.getElementsByTagName('img');
   for (let image of ALL_IMAGES) {
      image.addEventListener('click', () => {
     lity(image.src);
      })
   }
   </script>

문제는, 하위 모든 img를 잡느라고 레아아웃으로 만든 이미지까지 갤러리 화 되어버려서

제가 지금 원하는건 직계자손만 css로 따지면, .content-view img 이게 아니라, .content-view > img 만되게 하고싶은데.. 제가 찾아봐서 아래 코드로 바꿧는데도 직계자손이 아니라 전체 자손을 잡내요~

Copy

<script>
    const ENTRY_CONTENT = document.querySelector('.content-view');
    const DIRECT_CHILD_IMAGES = ENTRY_CONTENT.querySelectorAll('img');
    for (let image of DIRECT_CHILD_IMAGES) {
     image.addEventListener('click', () => {
     lity(image.src);
      })
   }
   </script>

무엇이 문제일까요?ㅠㅠ

javascript

답변 3개 / 댓글 3개

채택된 답변

+20 포인트

배르만

프로필 보기 작성한 질문 작성한 답변 전체 작성글 보기 전체 댓글 보기

2023-07-14 (금) 00:10:54

1. 모든 child 이미지 노드 이벤트 할당, 클릭시 부모노드 체크

Copy

const ENTRY_CONTENT = document.querySelector('.content-view');
const ALL_IMAGES = ENTRY_CONTENT.getElementsByTagName('img');
for (let image of ALL_IMAGES) {
  image.addEventListener('click', (evt) => {
    if (evt.target.parentNode != ENTRY_CONTENT) {
      return;
    }
    lity(image.src);
  });
}

2. 다이렉트 child 이미지 노드에 이벤트 할당

Copy

// const ENTRY_CONTENT = document.querySelector('.content-view');
// const ALL_IMAGES = ENTRY_CONTENT.getElementsByTagName('img');
const ALL_IMAGES = document.querySelectorAll('.content-view > img');
for (let image of ALL_IMAGES) {
  image.addEventListener('click', (evt) => {
    lity(image.src);
  });
}

답변에 대한 댓글 2개

피라미드

프로필 보기 작성한 질문 작성한 답변 전체 작성글 보기 전체 댓글 보기

2023-07-14 (금) 00:14:53

const ENTRY_CONTENT = document.querySelector('.content-view');
const DIRECT_CHILD_IMAGES = ENTRY_CONTENT.querySelectorAll('> img');
for (let image of DIRECT_CHILD_IMAGES) {
image.addEventListener('click', () => {
lity(image.src);
})
}