фильтр на сайте js

Question

есть несколько фильтров на сайте , когда я выбираю сортировать по цене то другой фильтр сбрасывается , как это можно исправить ?

function onfilterMapPin(){
    console.log(this.value);
    let items = document.querySelectorAll(".map__pin");
    for(let i = 0; i < items.length;i++){
        if(items[i].classList.contains(this.value)){
            items[i].style.display = "block";
        }
        else{
            items[i].style.display = "none";
        }
    }
};

filterHouseType.addEventListener("change",onfilterMapPin);

filterHousePrice.addEventListener("change",onfilterMapPin);

filterHouseRooms.addEventListener("change",onfilterMapPin);

filterHouseGuests.addEventListener("change",onfilterMapPin);

Answer 1

Дело в том, что вы каждый раз при фильтровании заново выбираете все существующие item, поэтому применяется только последний фильтр. Как вариант, создать массив в который будут сохранены все item, по querySelectorAll, так же как вы делаете это внутри функции, только снаружи нее. И циклом проходиться по нему. Внутри блока else, где вы присваиваете им display none добавить удаление этого item из массива pop-ом. Таким образом, когда фильтрование будет проходить в следующий раз, то вы уже будете итерировать массив сохранённых с прошлого фильтрования item-ов. Также если нужно очистить фильтры, то нужно просто обратно записать в этот массив все item по querySelectorAll. Такая вот логика. Надеюсь Вам поможет!)

БЛОГ НА HUSL

фильтр на сайте js

Ответы (1 шт):