포트폴리오를 만들면서 내가 만든 작업물들에 대해
카테고리대로 볼 수 있는 기능을 넣기로 했다.
html
<div class="work_categories">
<button class="category_btn selected" data-filter="*">
All
</button>
<button class="category_btn" data-filter="frontend">
Frontend
</button>
<button class="category_btn" data-filter="design">
Design
</button>
</div>
<ul class="work_projects">
<li class="project" data-type="frontend">
</li>
<li class="project" data-type="frontend">
</li>
<li class="project" data-type="frontend">
</li>
<li href="" class="project" data-type="design">
<img src="" alt="projects">
</li>
</ul>
버튼에 data-filter 값을 넣어 준다.
아래 리스트에 필터에 맞는 data-type 항목을 넣어줘서 일치하는 것끼리 노출되게 해준다
css
<style>
.project {
}
.project.invisible {
display: none;
}
</style>
project 클래스 = 리스트 요소 ( li ) 에 invisible 클래스 생성해주기
js
<script>
const categoryBtn = document.querySelector(".work_categories");
//카테고리 컨테이너를 가져옴
const projects = document.querySelectorAll(".project");
//work 리스트 전체를 가져옴
categoryBtn.addEventListener("click", (e) => {
const filter = e.target.dataset.filter;
//console.log(filter);
//e.target값 확인
if (filter == null) {
return;
}
projects.forEach((project) => {
// for문과 같은 의미, 배열을 불러와서 정렬
if (filter === "*" || filter === project.dataset.type) {
project.classList.remove("invisible");
} else {
project.classList.add("invisible");
}
})
});
</script>
결과
버튼을 눌렀을때 맞는 데이터값의 결과만 노출된다
포폴에 넣을땐 카테고리 변경에 따라 버튼 색상을 변화시켜주는 코드를 추가 하였다
// work 카테고리 필터링
const categoryBtn = document.querySelector(".work_categories"); //카테고리 컨테이너 가져옴
const projects = document.querySelectorAll(".project"); ///work 리스트 전체 가져옴
const projectContainer = document.querySelector('.work_projects');
categoryBtn.addEventListener("click", (e) => {
const filter = e.target.dataset.filter || e.target.parentNode.dataset.filter;
console.log(filter);
if (filter == null) {
return;
}
// work 카테고리 버튼 색상 변경
const active = document.querySelector('.category_btn.selected');
active.classList.remove('selected');
const target = e.target.nodeName === 'BUTTON' ? e.target : e.target.parentNode;
target.classList.add('selected');
projectContainer.classList.add('anim-out');
setTimeout(() => {
projects.forEach((projcet) => {
if(filter === "*" || filter === projcet.dataset.type) {
projcet.classList.remove('invisible');
} else {
projcet.classList.add('invisible');
}
})
projectContainer.classList.remove('anim-out');
}, 300);
});
