JSFiddle - React, Tailwind, and code Playground
by Eugene
HTML
<!--кнопки для включения категорий фильтра-->
<nav id="filter-portfolio">
<a href="#" data-id="all">All</a>
<a href="#" data-id="firstCategory">Planning</a>
<a href="#" data-id="secondCategory">Branding</a>
<a href="#" data-id="thirdCategory">Design</a>
<a href="#" data-id="fourthCategory">Production</a>
<a href="#" data-id="fifthCategory">Marketing</a>
</nav>
<!--картинки в карусели-->
<div class="table-row">
<div class="container">
<div class="fred-car-container works">
<div class="fred-car enable-pagination image-pagination objImg">
<!--first category-->
<img id="portfolioImg1" class="firstCategory" src="img/team-1.png" width="600" height="370" alt="photo">
<!--second category-->
<img id="portfolioImg8" class="secondCategory" src="img/team-2.png" width="600" height="370" alt="photo">
<!--third category-->
<img id="portfolioImg15" class="thirdCategory" src="img/team-3.png" width="600" height="370" alt="photo">
<!--fourth category-->
<img id="portfolioImg22" class="fourthCategory" src="img/team-4.png" width="600" height="370" alt="photo">
<!--fifth category-->
<img id="portfolioImg29" class="fifthCategory" src="img/team-5.png" width="600" height="370" alt="photo">
</div>
</div>
<!-- -->
<div id="thumbs-wrapper">
<div id="thumbs" class="objImg">
<!--first category-->
<a href="#portfolioImg1"><img class="firstCategory" src="img/team-1.png" alt="thumb"></a>
<a href="#portfolioImg2"><img class="firstCategory" src="img/team-1.png" alt="thumb"></a>
<a href="#portfolioImg3"><img class="firstCategory" src="img/team-1.png" alt="thumb"></a>
<a href="#portfolioImg4"><img class="firstCategory" src="img/team-1.png" alt="thumb"></a>
<a href="#portfolioImg5"><img class="firstCategory" src="img/team-1.png" alt="thumb"></a>
<a href="#portfolioImg6"><img class="firstCategory" src="img/team-1.png" alt="thumb"></a>
<a href="#portfolioImg7"><img class="firstCategory"...JavaScript
$(document).ready(function() {
//при клике должны удаляться те фото, у которых нет определенного класса и добавляться те, что имеют класс
$('#filter-portfolio a').click(function(){
//в переменную попадает атрибут фильтра, название которого совпадает с названием класса картинок из категории
var dataAttr = $(this).attr('data-id');
if (dataAttr == 'all') {
//как добавить все елементы в ДОМ из обьекта?
$('.container img').show();
}
else {
// скрываем картинки без класса
$('.container img').not('.'+dataAttr).hide();
//показываем картинки с классом
$('.container img.'+dataAttr).show();
}
});
});