javascript - 在 js 上选择过滤器

问题描述

我正在学习js，现在我的任务是过滤一些点的数组。一开始我有 4 个选择和一些选项，还有地图，其中呈现了 10 个引脚。每一个图钉都像是地图上的一个点，有人可以在这里租用他的公寓、房子或其他东西。选择必须通过四个参数过滤此引脚：类型、成本、房间和住户。我编程了选择过滤引脚，但他们每个人都在为自己做这件事。我需要多重过滤，但是当我使用两个（或更多）选择时，仅通过最后使用的选择进行过滤。

和现场战场，我正在做的地方。 http://demo.tlpunity.beget.tech/academy/book/

这是代码。

var secondRender = function(arr) {
    mapPins.innerHTML = '';
    articleList.innerHTML = '';
    render(arr);
};

var allElRender = function(arr) {
    mapPins.innerHTML = '';
    articleList.innerHTML = '';
    render(arr);
};

var allPinsArr = [];
var selects = document.querySelectorAll('.map__filter');
for(var i = 0;i < selects.length; i++) {

    selects[i].addEventListener('change', function() {
        var selectId = this.id;

        if( selectId === 'housing-type'){
            var typeValue = document.getElementById('housing-type').value; 
            var typeOptions = document.getElementsByClassName('map__filter')[0].getElementsByTagName('option');
            for(var i=0; i<typeOptions.length; i++){

                if(typeValue == near[i].offer.type) {
                    allPinsArr = near.filter(function(item) {
                        return item.offer.type == typeValue;
                    });
                    secondRender(allPinsArr);

                }
                else if(typeValue == 'any'){
                    allElRender(near);
                }
            }
        }
        else if( selectId === 'housing-price') {
            var priceValue = document.getElementById('housing-price').value; 
            var priceOptions = document.getElementsByClassName('map__filter')[1].getElementsByTagName('option');
            for(var i=0; i<priceOptions.length; i++){
                if(priceValue == 'low') {
                    allPinsArr = near.filter(function(item) {
                        return item.offer.price < 10000;
                    });
                    secondRender(allPinsArr);
                }
                else if(priceValue == 'middle'){
                    var allPinsArr = near.filter(function(item) {
                        return item.offer.price >= 10000 && item.offer.price <= 50000;
                    });
                    secondRender(allPinsArr);
                }
                else if(priceValue == 'high'){
                    var allPinsArr = near.filter(function(item) {
                        return item.offer.price > 50000;
                    });
                    secondRender(allPinsArr);
                }
                else if(priceValue == 'any'){
                    allElRender(near);
                }
            }
        }
        else if( selectId === 'housing-rooms') {
            var roomsValue = document.getElementById('housing-rooms').value; 
            var roomsOptions = document.getElementsByClassName('map__filter')[2].getElementsByTagName('option');
            for(var i=0; i<roomsOptions.length; i++){
                if(roomsValue == '1') {
                    allPinsArr = near.filter(function(item) {
                        return item.offer.rooms == roomsValue;
                    });
                    secondRender(allPinsArr);
                }
                else if(roomsValue == '2'){
                    var allPinsArr = near.filter(function(item) {
                        return item.offer.rooms == roomsValue;
                    });
                    secondRender(allPinsArr);
                }
                else if(roomsValue == '3'){
                    var allPinsArr = near.filter(function(item) {
                        return item.offer.price == roomsValue;
                    });
                    secondRender(allPinsArr);
                }
                else if(roomsValue == 'any'){
                    allElRender(near);
                }
            }
        }
        else if( selectId === 'housing-guests') {
            var guestsValue = document.getElementById('housing-guests').value; 
            var guestsOptions = document.getElementsByClassName('map__filter')[3].getElementsByTagName('option');
            for(var i=0; i<guestsOptions.length; i++){
                if(guestsValue == '1') {
                    allPinsArr = near.filter(function(item) {
                        return item.offer.guests == guestsValue;
                    });
                    secondRender(allPinsArr);
                }
                else if(guestsValue == '2'){
                    var allPinsArr = near.filter(function(item) {
                        return item.offer.guests == guestsValue;
                    });
                    secondRender(allPinsArr);
                }
                else if(guestsValue == 'any'){
                    allElRender(near);
                }
            }
        }
    });
}

那不是所有的代码，而只是过滤器。如果需要一些信息，请告诉我。谢谢你的帮助。

标签： javascriptselectfilter

javascript - 在 js 上选择过滤器

问题描述

解决方案

推荐阅读