그누보드 QA - 제이쿼리 직계자손만 잡기..질문

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

2023.07.13 23:43:52 조회 806 (183.♡.♡.69)

본문

안녕하세요~

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

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


<!--- 이건 그냥 -->
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 만되게 하고싶은데.. 제가 찾아봐서 아래 코드로 바꿧는데도 직계자손이 아니라 전체 자손을 잡내요~


<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

배르만 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2023-07-14 00:10:54 119.♡.♡.81

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


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 이미지 노드에 이벤트 할당


// 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);
  });
}

↳ 피라미드 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2023-07-14 00:14:53123.♡.♡.119

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);
})
}