data-filter와 data-type으로 필터링

카테고리별 필터링 작업

카테고리 버튼 클릭시 해당 문서가 보이게 작업

• html에서 태그안에 data-filter를 지정해준다.
• 해당 아이템 태그에 data-type으로 필터와 같은 값으로 지정해준다.
• 스타일에서 invisible을 display:none으로 만들어 놓고 해당문서일경우 remove시켜준다.
• 자바스크립트에서 forEach문으로 데이터를 받고 if문으로 해당시 출력되게 만들어준다.

//index.html

<section id="work" class="section">

//카테고리
      <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>
//아이템들
      <div class="work__projects">
        <a href="" class="project" data-type="frontend">
          <img src="" alt="projects" class="project__img"/>
        </a>
        <!--  -->
        
          ...
        
        <!--  -->
        <a href="" class="project" data-type="frontend">
          <img src="" alt="projects" class="project__img"/>
        </a>
      </div>
    </section>

• 카테고리 data-filter, 아이템 data-type값을 동일하게 지정한다.

const categoryBtn = document.querySelector(".work__categories");
//카테고리 컨테이너를 가져옴
const projects = document.querySelectorAll(".project");
//아이템 전체를 가져옴

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

• 카테고리와 프로젝트 각 컨테이너로 받아오고 아이템 전체를 불러온다.
  카테고리 : 클릭이벤트를 이용하여 e.target.dataset.filter를 지정하고 모든 아이템을 forEach문으로 돌려서 if문을 사용하여 filter와 아이템 data.type와 비교후 일치하면 스타일에 적용한 display:none을 remove하고 일치하지 않은경우 display:none을 추가하여 해당 아이템만 보여지게 만든다.

//모든 아이템이 보여진 상태
.project {
  position: relative;
  width: 280px;
  height: 280px;
  margin: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--color-lg);
  background-color: var(--color-wh);
  overflow: hidden;
  transition: all 300ms ease;
}

//필터링후 추가 삭제
.project.invisible {
  display: none;
}