#TIL27

버튼클릭시 일치하는 데이터만 나오게 하기(filtering)


1.

HTML

  <section id="work" class="section scroll-spy">
    <div class="section__container">
      <h1>My work</h1>
      <h3>Projects</h3>
      <div class="work__categories">
        <button class="category__btn selected" data-filter="*">
          All<span class="category__count">3</span>
        </button>
        <button class="category__btn" data-filter="front-end">
          Front-end<span class="category__count">3</span>
        </button>
        <button class="category__btn" data-filter="back-end">
          Back-end<span class="category__count">4</span>
        </button>
        <button class="category__btn" data-filter="mobile">
          Mobile<span class="category__count">2</span>
        </button>
      </div>
      <div class="work__projects">
        <a href="#" class="project" target="_blank" data-type="front-end">
          <img class="project__img" src="./images/projects/youtube.PNG" alt="Youtube">
          <div class="project__description">
            <h3>YouTube Site</h3>
            <span>Clone coding with HTML and CSS</span>
          </div>
        </a>
        <a href="#" class="project" target="_blank" data-type="back-end">
          <img class="project__img" src="./images/projects/header.PNG" alt="responsive-nav-bar">
          <div class="project__description">
            <h3>Responsive Navbar</h3>
            <span>HTML, CSS with media query</span>
          </div>
        </a>
        <a href="#" class="project" target="_blank" data-type="mobile">
          <img class="project__img" src="./images/projects/overwatch.PNG" alt="Youtube">
          <div class="project__description">
            <h3>Overwatch Site</h3>
            <span>HTML, CSS with media query</span>
          </div>
        </a>
        <a href="#" class="project" target="_blank" data-type="front-end">
          <img class="project__img" src="./images/projects/youtube.PNG" alt="Youtube">
          <div class="project__description">
            <h3>YouTube Site</h3>
            <span>Clone coding with HTML and CSS</span>
          </div>
        </a>
        <a href="#" class="project" target="_blank" data-type="back-end">
          <img class="project__img" src="./images/projects/header.PNG" alt="responsive-nav-bar">
          <div class="project__description">
            <h3>Responsive Navbar</h3>
            <span>HTML, CSS with media query</span>
          </div>
        </a>
        <a href="#" class="project" target="_blank" data-type="mobile">
          <img class="project__img" src="./images/projects/overwatch.PNG" alt="Youtube">
          <div class="project__description">
            <h3>Overwatch Site</h3>
            <span>HTML, CSS with media query</span>
          </div>
        </a>
        <a href="#" class="project" target="_blank" data-type="front-end">
          <img class="project__img" src="./images/projects/header.PNG" alt="responsive-nav-bar">
          <div class="project__description">
            <h3>Responsive Navbar</h3>
            <span>HTML, CSS with media query</span>
          </div>
        </a>
        <a href="#" class="project" target="_blank" data-type="back-end">
          <img class="project__img" src="./images/projects/overwatch.PNG" alt="Youtube">
          <div class="project__description">
            <h3>Overwatch Site</h3>
            <span>HTML, CSS with media query</span>
          </div>
        </a>
      </div>
    </div>
  </section>

JavaScript

• Remove selection from the previous item and select the new one
  

<script>
  const workBtnContainer = document.querySelector('.work__categories');
  const projectContainer = document.querySelector('.work__projects');
  const projects = document.querySelectorAll('.project');
  workBtnContainer.addEventListener('click', (e) => {
    const filter = e.target.dataset.filter || e.target.parentNode.dataset.filter;
    if (filter === null) {
      return;
    }

    const actvie = document.querySelector('.category__btn.selected');
    actvie.classList.remove('selected');
    const target = e.target.nodeName === 'BUTTON' ? e.target : e.target.parentNode;
    target.classList.add('selected');

    projects.forEach((project) => {
      console.log('type:',project.dataset.type);
      if ( filter === '*' || filter === project.dataset.type) {
        project.classList.remove('invisible');
      } else {
        project.classList.add('invisible');
      }
    });
  });
 </script>

CSS

.project.invisible {
  display: none;
}

 

2.

HTML

  <section id="movies">
    <h2 class="hide">영화정보</h2>
    <div class="inner">
      <ul class="movies__menu">
        <li><button class="btn btn--gray selected" data-filter="*">박스오피스</button></li>
        <li><button class="btn btn--gray" data-filter="chart1">최신개봉작</button></li>
        <li><button class="btn btn--gray" data-filter="chart2">상영예정작</button></li>
        <li><button class="btn btn--gray" data-filter="chart3">큐레이션</button></li>
      </ul>

      <div class="swiper-container all " data-type="*"> 
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="./img/poster01@2.jpg" alt="" class="poster" />
            <div class="movie">
              <div class="title">
                <img src="./img/19.PNG" alt="" class="icon" />
                <h5>침묵</h5>
              </div>

              <div class="btn-group">
                <a href="javascript:void(0)" class="btn btn--gray">상세정보</a>
                <a href="javascript:void(0)" class="btn btn--gray">예매하기</a>
              </div>
              <div class="rank">1</div>
            </div>
          </div>
          <div class="swiper-slide">
            <img src="./img/poster02@2.jpg" alt="" class="poster" />
            <div class="movie">
              <div class="title">
                <img src="./img/19.PNG" alt="" class="icon" />
                <h5>신세계</h5>
              </div>

              <div class="btn-group">
                <a href="javascript:void(0)" class="btn btn--gray">상세정보</a>
                <a href="javascript:void(0)" class="btn btn--gray">예매하기</a>
              </div>
              <div class="rank">2</div>
            </div>
          </div>
          <div class="swiper-slide">
            <img src="./img/poster03@2.jpg" alt="" class="poster" />
            <div class="movie">
              <div class="title">
                <img src="./img/15.PNG" alt="" class="icon" />
                <h5>마스터</h5>
              </div>

              <div class="btn-group">
                <a href="javascript:void(0)" class="btn btn--gray">상세정보</a>
                <a href="javascript:void(0)" class="btn btn--gray">예매하기</a>
              </div>
              <div class="rank">3</div>
            </div>
          </div>
          <div class="swiper-slide">
            <img src="./img/poster04@2.jpg" alt="" class="poster" />
            <div class="movie">
              <div class="title">
                <img src="./img/15.PNG" alt="" class="icon" />
                <h5>마약왕</h5>
              </div>

              <div class="btn-group">
                <a href="javascript:void(0)" class="btn btn--gray">상세정보</a>
                <a href="javascript:void(0)" class="btn btn--gray">예매하기</a>
              </div>
              <div class="rank">4</div>
            </div>
          </div>
          <div class="swiper-slide">
            <img src="./img/poster05@2.jpg" alt="" class="poster" />
            <div class="movie">
              <div class="title">
                <img src="./img/19.PNG" alt="" class="icon" />
                <h5>her</h5>
              </div>

              <div class="btn-group">
                <a href="javascript:void(0)" class="btn btn--gray">상세정보</a>
                <a href="javascript:void(0)" class="btn btn--gray">예매하기</a>
              </div>
              ...
              

Javascript

// MOVIES FILTERING
<script>
const moviesMenu = document.querySelector('#movies .movies__menu');
const slides = document.querySelectorAll('#movies .swiper-container');
moviesMenu.addEventListener('click', function (event) {
  const filter = event.target.dataset.filter;
  // console.log('filter:', filter);
  if (filter === null) {
    return;
  }
  // MOVIES SELECTED BUTTON
  const active = moviesMenu.querySelector('.btn.selected');
  if (active != null) {
    active.classList.remove('selected');
  }
  event.target.classList.add('selected');


  slides.forEach(function (slide) {
    // console.log('type:', slide.dataset.type);
    if (filter === slide.dataset.type) {
      slide.classList.remove('invisible');
    } else {
      slide.classList.add('invisible');
    };
  });
});
</script>

CSS

#movies .swiper-container.invisible {
  display: none;
}