#TIL27
84551 ワード
ボタンをクリックすると一致するデータのみが表示されます(フィルタ)
1.
Remove selection from the previous item and select the new one
2.
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
<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/[email protected]" 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/[email protected]" 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/[email protected]" 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/[email protected]" 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/[email protected]" 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;
}
Reference
この問題について(#TIL27), 我々は、より多くの情報をここで見つけました https://velog.io/@jeonhyelin/TIL27テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol