TIL : Javascript(filtering)
Javascript filtering
HINT! 각각의 카테고리와 프로젝트에 data-* 를 넣어줘서 클릭할 때마다 class를 추가해 어떤 프로젝트를 노출시킬지 정해준다!
기억하고 싶은 코드
category.addEventListener('click', (e) => {
projects.forEach((project) => {
if (
e.target.dataset.filter == 'All' ||
e.target.dataset.filter == project.dataset.type
) {
project.classList.remove('hide');
} else {
project.classList.add('hide');
}
});
});
document.querySelectorAll
지정된 셀렉터 그룹의 리스트를 받아온다! 내 프로젝트에서는 각각의 프로젝트 리스트를 받아오는 것!
foreach문
-
for문을 좀 더 간결하게 사용할 수 있다. forEach() 메서드는 주어진 함수를 배열 요소 각각에 대해 실행
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach 참고
-
for / foreach
const items = ['item1', 'item2', 'item3'];
const copy = [];
//for
for(let i=0; i<items.length;i++) {
copy.push(items[i]);
//foreach
items.foreach(item =>{
copy.push(item)
});
HINT! 각각의 카테고리와 프로젝트에 data-* 를 넣어줘서 클릭할 때마다 class를 추가해 어떤 프로젝트를 노출시킬지 정해준다!
category.addEventListener('click', (e) => {
projects.forEach((project) => {
if (
e.target.dataset.filter == 'All' ||
e.target.dataset.filter == project.dataset.type
) {
project.classList.remove('hide');
} else {
project.classList.add('hide');
}
});
});
지정된 셀렉터 그룹의 리스트를 받아온다! 내 프로젝트에서는 각각의 프로젝트 리스트를 받아오는 것!
for문을 좀 더 간결하게 사용할 수 있다. forEach() 메서드는 주어진 함수를 배열 요소 각각에 대해 실행
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach 참고
for / foreach
const items = ['item1', 'item2', 'item3'];
const copy = [];
//for
for(let i=0; i<items.length;i++) {
copy.push(items[i]);
//foreach
items.foreach(item =>{
copy.push(item)
});
각각의 요소들에 대한 조건문을 실행시킬때 편하게 사용할 수 있을 것 같다!!
display : none 과 visibility : hidden 차이점
둘 중 뭘 써야할까??
display :none
- 아예 사라져버린다! 레이아웃상에서도 사라져 다른 요소들에 영향을 주지 않는다!
visibility : hidden
- 그냥 우리 눈에만 안보이는 것! 레이아웃 상에서는 존재한다! width,height를 줬다면 그만큼 공간을 차지하고 있는 것.
여기서는 클릭할 때 마다 레이아웃도 변화해야 하기에 display : none을 써줘야 한다!
Author And Source
이 문제에 관하여(TIL : Javascript(filtering)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@pgy93/TIL-Javascriptfiltering저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)