Фильтр по полям ACF на php и Js

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);
	}
}
Контакты

Работаем: с ПН по ПТ, с 08:00 до 16:00 (МСК)
Отдыхаем: в СБ и ВС, чтобы быть в тонусе
и реализовывать самые сложные идеи