제이쿼리 직계자손만 잡기..질문 채택완료
안녕하세요~
lightbox를 이용해서 이미지를 클릭하면 갤러리고 보이는걸 사용하는데요,
지금 현상황은 .content-view 라는 클래스 div에 모든 자식 태그 img 가 자동으로 클릭이 되고, 클릭하면 라이트박스가 뜨는건데..
</strong></p>
<p><strong><!--- 이건 그냥 --></strong></p>
<p><strong><a href="https://cdnjs.cloudflare.com/ajax/libs/lity/2.4.1/lity.min.js" target="_blank" rel="noopener noreferrer">https://cdnjs.cloudflare.com/ajax/libs/lity/2.4.1/lity.min.js</a></strong></p>
<p><strong><a href="https://cdnjs.cloudflare.com/ajax/libs/lity/2.4.1/lity.css" target="_blank" rel="noopener noreferrer">https://cdnjs.cloudflare.com/ajax/libs/lity/2.4.1/lity.css</a></strong></p>
<p><strong><!--- 이건 그냥 --></strong></p>
<p> </p>
<p> <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></p>
<p><strong>
문제는, 하위 모든 img를 잡느라고 레아아웃으로 만든 이미지까지 갤러리 화 되어버려서
제가 지금 원하는건 직계자손만 css로 따지면, .content-view img 이게 아니라, .content-view > img 만되게 하고싶은데.. 제가 찾아봐서 아래 코드로 바꿧는데도 직계자손이 아니라 전체 자손을 잡내요~
</strong></p>
<p><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></p>
<p><strong>
무엇이 문제일까요?ㅠㅠ
답변 3개
1. 모든 child 이미지 노드 이벤트 할당, 클릭시 부모노드 체크
</p>
<p>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);
});
}</p>
<p>
2. 다이렉트 child 이미지 노드에 이벤트 할당
</p>
<p>// 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);
});
}</p>
<p>답변에 대한 댓글 2개
2번 다이렉트 차일드 이미지 노드 할당요~
진짜 복 받이 받으실꺼에요 ㅠㅠ
댓글을 작성하려면 로그인이 필요합니다.
답변주신분들 너무너무 감사합니다.
해결이 되었구요~!!!! 일단, js코드 자체가 조금 문제가 있어서, 실 작동은 베르만님게 작동이 되네요~~ㅠㅠㅠㅠㅠ
진짜 10년 감수했습니다~ㅠㅠㅠ
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
const DIRECT_CHILD_IMAGES = ENTRY_CONTENT.querySelectorAll('> img');
for (let image of DIRECT_CHILD_IMAGES) {
image.addEventListener('click', () => {
lity(image.src);
})
}