HTML
<div class="projects-page">
<div class="container">
<div class="filters" id="filters">
<?php
$square = get_field_object('общая_площадь');
$floors = get_field_object('этажность');
$arh = get_field_object('архитектура');
$filters = array();
$filters['square'] = $square;
$filters['floors'] = $floors;
$filters['arh'] = $arh;
?>
<?php foreach((array) $filters as $key=>$f) : ?>
<div class="filter" filter="<?php echo $key; ?>">
<div class="title-bold"><?php echo $f['label']?></div>
<div class="select">
<?php $opt = $f['choices']; ?>
<?php foreach((array) $opt as $s) : ?>
<div class="select--inner" val="<?php echo $s; ?>"><?php echo $s; ?></div>
<?php endforeach; ?>
</div>
</div>
<?php endforeach; ?>
<span class="clear-filter">сброс</span>
</div>
<div class="flex_block" id="results">
<?php query_posts('post_type=projects & posts_per_page=-1'); ?>
<?php if ( have_posts() ) : ?>
<?php while ( have_posts()) : the_post(); ?>
<a class="project--inner obj miniature" href="<?php echo get_post_permalink($p->ID); ?>"
floors="<?php echo get_field("этажность", $p->ID); ?>"
square="<?php echo get_field("общая_площадь", $p->ID); ?>"
arh="<?php echo get_field("архитектура", $p->ID); ?>"
type="<?php echo get_the_category($p->ID)[0]->term_id; ?>">
<?php
$image = get_field('обложка_проекта');
if( !empty($image) ): ?>
<img src="<?php echo $image['sizes']['medium_large']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endif; ?>
<div class="text">
<div class="title-block"><?php the_title(); ?></div>
<div class="specifications">
<div class="specif--inner">Этажей: <?php the_field('этажность'); ?></div>
<div class="specif--inner">Площадь: <?php the_field('общая_площадь'); ?> м²</div>
</div>
<div class="btn-decor"><span>Детали проекта</span></div>
</div>
</a>
<?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_query(); ?>
</div>
</div>
</div>LESS
.hide.obj{
display: none;
}
.filters{
padding: 30px 0;
background: @bg;
margin-bottom: 50px;
.filter{
display: inline-block;
vertical-align: text-top;
position: relative;
margin-right: 50px;
&:hover{
& > .title-bold{
color: @color-1;
}
.select{
opacity: 1;
z-index: 2;
}
}
.title-bold{
margin: 0;
cursor: pointer;
}
.select{
position: absolute;
left: 0;
top: 35px;
background: #fff;
box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.12);
padding: 30px;
transition: 0.3s all;
opacity: 0;
z-index: -1;
.title-bold{
padding: 10px 0;
}
.select--inner{
margin-bottom: 10px;
padding-left: 40px;
cursor: pointer;
position: relative;
white-space: nowrap;
transition: 0.3s all;
&:last-child{
margin-bottom: 0;
}
&::before{
content: '';
position: absolute;
left: 0;
top: 3px;
width: 14px;
height: 14px;
background: #ebebeb;
}
&:hover{
color: @color-1;
}
}
.checked{
color: @color-1;
&::before{
background: @color-1 url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='20 6 9 17 4 12'%3e%3c/polyline%3e%3c/svg%3e") no-repeat 50% 50%;
}
}
}
}
.clear-filter{
display: inline-block;
vertical-align: text-top;
font-size: 0;
width: 20px;
height: 20px;
background: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2.5 2v6h6M2.66 15.57a10 10 0 1 0 .57-8.38'/%3e%3c/svg%3e") no-repeat 50% 50%;
transition: 0.3s all;
cursor: pointer;
transition: 0.3s all;
opacity: 0;
z-index: -1;
&:hover{
opacity: 0.5;
}
}
.show{
opacity: 1;
z-index: 1;
}
}projects.js
window.addEventListener("load", ready);
function ready(){
let chbx = document.querySelectorAll("#filters .select>*");
let filter= document.querySelectorAll("#filters .filter");
let objects = document.querySelectorAll("#results .obj");
let cats = document.querySelectorAll(".categories .cat");
let clearFilter = document.querySelector("#filters .clear-filter");
let filterParam ={
'floors':[],
'square':[],
'arh':[],
'type':[]
};
for(let c of filter){
c.addEventListener("click", checkbox);
}
for(let c of chbx){
c.addEventListener("click", filterOut);
}
clearFilter.onclick = ()=>{
for(let o of objects){
o.classList.remove("hide");
}
for(let c of chbx){
c.classList.remove("checked");
}
filterParam = {
'floors' : [],
'square' : [],
'arh' : [],
'type' : []
};
clearFilter.classList.remove("show");
}
function checkbox(e){
if(!e.target.classList.contains("name") && !e.target.classList.contains("filter")){
return;
}
let ps = document.querySelector(".filter.show");
if(ps==this){
ps.classList.remove("show");
}else if(ps!=null){
ps.classList.remove("show");
this.classList.toggle("show");
}else{
this.classList.toggle("show");
}
}
function filterOut(){
clearFilter.classList.add("show");
let fName = "";
let fVal = this.getAttribute("val");
if(this.classList.contains("cat")){
fName = "type";
}else{
fName = this.closest(".filter").getAttribute("filter");
}
for(let o of objects){
o.classList.add("hide");
}
if(this.classList.contains("checked")){
//eval(`filterParam.${fName}.splice(filterParam.${fName}.indexOf(${fVal}), 1)`);
//filterParam[fName].splice(filterParam[fName].indexOf(fVal, 1)) ;
filterParam[fName] = filterParam[fName].filter( el => el !== fVal );
}else{
//eval(`filterParam.${fName}.push(${fVal})`);
filterParam[fName].push(fVal);
}
this.classList.toggle("checked");
// for(let f in filterParam){
// let arr = eval(`filterParam.${f}`);
// if(arr.length!=0){
// for(let i of arr){
// let suitable = document.querySelectorAll(`.obj[${f}="${i}"]`);
// for(let s of suitable){
// s.classList.remove("hide");
// }
// }
// }
// }
for (let obj of objects) { //go through all objects
let unhide_detected = true;
for(let f in filterParam){ //go through all filters
let arr = eval(`filterParam.${f}`);
console.log();
if(arr.length !=0 ){ //if there is applied filter
let object_in_filter = false;
for(let i of arr){ //then go through all filter values
if (obj.getAttribute(f) == i) { //if object has filter value
object_in_filter = true;
}
}
if (object_in_filter == false) { //if object didn't met any filter values
unhide_detected = false;
}
}
}
if (unhide_detected == true) { //if object didn't met any filters
obj.classList.remove("hide");
}
}
console.log(filterParam);
}
}