JavaScript-设置函数以基于1或2个选定标记返回所有项（无jQUERY）

我有一些JavaScrip，用于检查是否选择了任何媒体标签或行业标签——这样就可以在浏览器中相应地对组合项目进行排序和显示

我所拥有的几乎100%都能正常工作，但我不知道如何使它在只选择了媒体标签或只选择了行业标签的情况下，公文包项目仍然应该进行相应的排序。目前，您必须选择媒体标签和行业标签，但我希望用户能够仅使用媒体标签或行业标签进行搜索

以下是我想要完成的：如果只选择了一个媒体标签，那么获取与该媒体标签关联的所有公文包片段。如果仅选择了行业标记，则获取与该行业标记关联的所有投资组合项。如果同时选择了媒体标签和行业标签，则获取与这两个标签关联的所有公文包项目

香草JS不是我的强项，所以请原谅我，如果这是一个愚蠢的问题，但这已经让我困惑了好几个小时了

请不要回答jQuery，因为整个页面的功能都是使用JavaScript构建的

以下是函数：

var update = function () {
    closeDrawer();
    // update ui to reflect tag changes
    // get our list of items to display

    var itemsToDisplay = [];
    var currentMediaTag = controlsContainer.querySelector('.media.selected');
    var currentIndustryTag = controlsContainer.querySelector('.industry.selected');

    if (currentMediaTag != "" && currentMediaTag != null) {
        selectedMediaFilter = currentMediaTag.innerHTML;
    }

    if (currentIndustryTag != "" && currentIndustryTag != null) {
        selectedIndustryFilter = currentIndustryTag.innerHTML;
    }

    if (selectedMediaFilter == "" && selectedIndustryFilter == "") {
        itemsToDisplay = portfolioItems.filter(function (item) {
            return item.preferred;
        });

    } else {
        itemsToDisplay = portfolioItems.filter(function (item) {
            var mediaTags = item.media_tags,
                industryTags = item.industry_tags;

            if(industryTags.indexOf(selectedIndustryFilter) < 0){
                return false;
            }
            else if(mediaTags.indexOf(selectedMediaFilter) < 0){
                return false;
            }

            else{
                return true;
            }
        });
    }
    renderItems(itemsToDisplay);
}

var update=函数（）{
抽屉（）；
//更新ui以反映标记更改
//获取要显示的项目列表
var itemsToDisplay=[]；
var currentMediaTag=controlsContainer.querySelector（'.media.selected'）；
var currentIndustryTag=controlsContainer.querySelector（'.industry.selected'）；
如果（currentMediaTag！=“”¤tMediaTag！=null）{
selectedMediaFilter=currentMediaTag.innerHTML；
}
如果（currentIndustryTag！=“”¤tIndustryTag！=null）{
selectedIndustryFilter=currentIndustryTag.innerHTML；
}
如果（selectedMediaFilter==“”&selectedIndustryFilter==“”）{
itemsToDisplay=portfolioItems.filter（函数（项）{
退货项目优先；
});
}否则{
itemsToDisplay=portfolioItems.filter（函数（项）{
var mediaTags=item.media\u标记，
industryTags=项目。行业标签；
if（行业标签索引of（selectedIndustryFilter）<0）{
返回false；
}
else if（mediaTags.indexOf（selectedMediaFilter）<0）{
返回false；
}
否则{
返回true；
}
});
}
renderItems（itemsToDisplay）；
}

不完全确定是否有必要，但以防万一，下面是处理公文包页面的完整JS文件：

(function ($) {
    document.addEventListener("DOMContentLoaded", function (event) {
        // for portfolio interaction
        var portfolioGrid = (function () {
            var gridSize = undefined,
                parentContainer = document.querySelector('.portfolio-item-container');
            containers = parentContainer.querySelectorAll('.view'),
                drawer = parentContainer.querySelector('.drawer'),
                bannerContainer = drawer.querySelector('.banner-container'),
                thumbsContainer = drawer.querySelector('.thumbs-container'),
                descriptionContainer = drawer.querySelector('.client-description'),
                clientNameContainer = drawer.querySelector('.client-name'),
                controlsContainer = document.querySelector('.portfolio-controls-container'),
                selectedMediaFilter = "", selectedIndustryFilter = "";

            var setGridSize = function () {
                var windowSize = window.innerWidth,
                    previousGridSize = gridSize;

                if (windowSize > 1800) {
                    gridSize = 5;
                } else if (windowSize > 900) {
                    gridSize = 4;
                } else if (windowSize > 600 && windowSize <= 900) {
                    gridSize = 3;
                } else {
                    gridSize = 2;
                }

                if (previousGridSize != gridSize) {
                    closeDrawer();
                }
            };

            var attachResize = function () {
                window.onresize = function () {
                    setGridSize();
                };
            };

            var getRowClicked = function (boxNumber) {
                return Math.ceil(boxNumber / gridSize);
            };

            var getLeftSibling = function (row) {
                var cI = row * gridSize;
                return containers[cI >= containers.length ? containers.length - 1 : cI];
            };

            var openDrawer = function () {
                drawer.className = 'drawer';
                scrollToBanner();
            };

            var scrollToBanner = function () {
                var mainContainer = document.querySelector('#main-container'),
                    mainBounding = mainContainer.getBoundingClientRect(),
                    scrollY = (drawer.offsetTop - mainBounding.bottom) - 10,
                    currentTop = document.body.getBoundingClientRect().top;

                animate(document.body, "scrollTop", "", document.body.scrollTop, scrollY, 200, true);
            };

            var animate = function (elem, style, unit, from, to, time, prop) {
                if (!elem) return;
                var start = new Date().getTime(),
                    timer = setInterval(function () {
                        var step = Math.min(1, (new Date().getTime() - start) / time);
                        if (prop) {
                            elem[style] = (from + step * (to - from)) + unit;
                        } else {
                            elem.style[style] = (from + step * (to - from)) + unit;
                        }
                        if (step == 1) clearInterval(timer);
                    }, 25);
                elem.style[style] = from + unit;
            }

            var closeDrawer = function () {
                drawer.className = 'drawer hidden';
            };

            var cleanDrawer = function () {
                bannerContainer.innerHTML = "";
                clientNameContainer.innerHTML = "";
                descriptionContainer.innerHTML = "";
                thumbsContainer.innerHTML = "";
            };

            var resetThumbs = function () {
                Array.prototype.forEach.call(thumbsContainer.querySelectorAll('.thumb'), function (t) {
                    t.className = "thumb";
                });
            };

            var handleBannerItem = function (item) {
                bannerContainer.innerHTML = "";
                if (item.youtube) {
                    var videoContainer = document.createElement('div'),
                        iframe = document.createElement('iframe');

                    videoContainer.className = "videowrapper";
                    iframe.className = "youtube-video";
                    iframe.src = "https://youtube.com/embed/" + item.youtube;
                    videoContainer.appendChild(iframe);
                    bannerContainer.appendChild(videoContainer);
                } else if (item.soundcloud) {
                    var iframe = document.createElement('iframe');
                    iframe.src = item.soundcloud;
                    iframe.className = "soundcloud-embed";
                    bannerContainer.appendChild(iframe);
                } else if (item.banner) {
                    var bannerImage = document.createElement('img');
                    bannerImage.src = item.banner;
                    bannerContainer.appendChild(bannerImage);
                }
            };

            var attachClick = function () {
                Array.prototype.forEach.call(containers, function (n, i) {
                    n.querySelector('a.info').addEventListener('click', function (e) {
                        e.preventDefault();
                    });

                    n.addEventListener('click', function (e) {
                        var boxNumber = i + 1,
                            row = getRowClicked(boxNumber);
                        var containerIndex = row * gridSize;
                        if (containerIndex >= containers.length) {
                            // we're inserting drawer at the end
                            parentContainer.appendChild(drawer);
                        } else {
                            // we're inserting drawer in the middle somewhere
                            var leftSiblingNode = getLeftSibling(row);
                            leftSiblingNode.parentNode.insertBefore(drawer, leftSiblingNode);
                        }
                        // populate
                        cleanDrawer();
                        var mediaFilterSelected = document.querySelector('.media-tags .tag-container .selected');
                        var selectedFilters = "";
                        if (mediaFilterSelected != "" && mediaFilterSelected != null) {
                            selectedFilters = mediaFilterSelected.innerHTML;
                        }
                        var portfolioItemName = '';
                        var selectedID = this.getAttribute('data-portfolio-item-id');
                        var data = portfolioItems.filter(function (item) {
                            portfolioItemName = item.name;
                            return item.id === selectedID;
                        })[0];

                        clientNameContainer.innerHTML = data.name;
                        descriptionContainer.innerHTML = data.description;
                        var childItems = data.child_items;

                        //We will group the child items by media tag and target the unique instance from each group to get the right main banner
                        Array.prototype.groupBy = function (prop) {
                            return this.reduce(function (groups, item) {
                                var val = item[prop];
                                groups[val] = groups[val] || [];
                                groups[val].push(item);
                                return groups;
                            }, {});
                        }
                        var byTag = childItems.groupBy('media_tags');
                        if (childItems.length > 0) {
                            handleBannerItem(childItems[0]);
                            var byTagValues = Object.values(byTag);
                            byTagValues.forEach(function (tagValue) {
                                for (var t = 0; t < tagValue.length; t++) {
                                    if (tagValue[t].media_tags == selectedFilters) {
                                        handleBannerItem(tagValue[0]);
                                    }
                                }
                            });
                            childItems.forEach(function (item, i) {
                                var img = document.createElement('img'),
                                    container = document.createElement('div'),
                                    label = document.createElement('p');
                                container.appendChild(img);
                                var mediaTags = item.media_tags;

                                container.className = "thumb";
                                label.className = "childLabelInactive thumbLbl";
                                thumbsContainer.appendChild(container);
                                if (selectedFilters.length > 0 && mediaTags.length > 0) {
                                    for (var x = 0; x < mediaTags.length; x++) {
                                        if (mediaTags[x] == selectedFilters) {
                                            container.className = "thumb active";
                                            label.className = "childLabel thumbLbl";
                                        }
                                    }
                                }
                                else {
                                    container.className = i == 0 ? "thumb active" : "thumb";
                                }

                                img.src = item.thumb;
                                if (item.media_tags != 0 && item.media_tags != null) {
                                    childMediaTags = item.media_tags;
                                    childMediaTags.forEach(function (cMTag) {
                                        varLabelTxt = document.createTextNode(cMTag);
                                        container.appendChild(label);
                                        label.appendChild(varLabelTxt);
                                    });
                                }
                                img.addEventListener('click', function (e) {
                                    scrollToBanner();
                                    resetThumbs();
                                    handleBannerItem(item);
                                    container.className = "thumb active";
                                });
                            });
                        }
                        openDrawer();
                    });
                });
            };

            var preloadImages = function () {
                portfolioItems.forEach(function (item) {
                    var childItems = item.child_items;
                    childItems.forEach(function (child) {
                        (new Image()).src = child.banner;
                        (new Image()).src = child.thumb;
                    });
                });
            };

//////////////////////////////////// UPDATE FUNCTION /////////////////////////////////////
            var update = function () {
                closeDrawer();
                // update ui to reflect tag changes
                // get our list of items to display

                var itemsToDisplay = [];
                var currentMediaTag = controlsContainer.querySelector('.media.selected');
                var currentIndustryTag = controlsContainer.querySelector('.industry.selected');

                if (currentMediaTag != "" && currentMediaTag != null) {
                    selectedMediaFilter = currentMediaTag.innerHTML;
                }

                if (currentIndustryTag != "" && currentIndustryTag != null) {
                    selectedIndustryFilter = currentIndustryTag.innerHTML;
                }

                if (selectedMediaFilter == "" && selectedIndustryFilter == "") {
                    itemsToDisplay = portfolioItems.filter(function (item) {
                        return item.preferred;
                    });

                } else {
                    itemsToDisplay = portfolioItems.filter(function (item) {
                        var mediaTags = item.media_tags,
                            industryTags = item.industry_tags;

                        if (industryTags.indexOf(selectedIndustryFilter) < 0) {
                            return false;
                        }

                        else if (mediaTags.indexOf(selectedMediaFilter) < 0) {
                            return false;
                        }

                        else {
                            return true;
                        }

                    });
                }

                renderItems(itemsToDisplay);
            }

//////////////////////////////////// RENDERITEMS FUNCTION /////////////////////////////////////

            var renderItems = function (items) {
                var children = parentContainer.querySelectorAll('.view');
                Array.prototype.forEach.call(children, function (child) {
                    // remove all event listeners then remove child
                    parentContainer.removeChild(child);
                });

                items.forEach(function (item) {

                    var container = document.createElement('div'),
                        thumb = document.createElement('img'),
                        mask = document.createElement('div'),
                        title = document.createElement('h6'),
                        excerpt = document.createElement('p'),
                        link = document.createElement('a');

                    container.className = "view view-tenth";
                    container.setAttribute('data-portfolio-item-id', item.id);

                    thumb.src = item.thumb;

                    mask.className = "mask";

                    title.innerHTML = item.name;
                    excerpt.innerHTML = item.excerpt;

                    link.href = "#";
                    link.className = "info";
                    link.innerHTML = "View Work";

                    container.appendChild(thumb);
                    container.appendChild(mask);

                    mask.appendChild(title);
                    mask.appendChild(excerpt);
                    mask.appendChild(link);
                    parentContainer.insertBefore(container, drawer);
                });

                containers = parentContainer.querySelectorAll('.view');
                attachClick();
            };

            var filterHandler = function (linkNode, tagType) {

                var prevSelection = document.querySelector("." + tagType + '.selected');
                if (prevSelection != "" && prevSelection != null) {
                    prevSelection.className = tagType + ' tag';
                }

                linkNode.className = tagType + ' tag selected';
                update();
            };

            var clearFilters = function (nodeList, filterType) {
                Array.prototype.forEach.call(nodeList, function (node) {
                    node.className = filterType + " tag";
                    console.log("Clear filters function called");
                });
            }

            var attachFilters = function () {
                var mediaFilters = controlsContainer.querySelectorAll('.tag.media'),
                    industryFilters = controlsContainer.querySelectorAll('.tag.industry'),
                    filterToggle = controlsContainer.querySelectorAll('.filter-toggle');

                // resets
                controlsContainer.querySelector('.media-tags .reset')
                    .addEventListener('click',
                    function (e) {
                        e.preventDefault();
                        selectedMediaFilter = "";
                        clearFilters(controlsContainer.querySelectorAll('.media-tags a.tag'), "media");
                        update();
                    }
                );

                controlsContainer.querySelector('.industry-tags .reset')
                    .addEventListener('click',
                    function (e) {
                        e.preventDefault();
                        selectedIndustryFilter = "";
                        clearFilters(controlsContainer.querySelectorAll('.industry-tags a.tag'), "industry");

                        update();
                    }
                );

                Array.prototype.forEach.call(filterToggle, function (toggle) {
                    toggle.addEventListener('click', function (e) {
                        if (controlsContainer.className.indexOf('open') < 0) {
                            controlsContainer.className += ' open';
                        } else {
                            controlsContainer.className = controlsContainer.className.replace('open', '');
                        }
                    });
                });

                //Attaches a click event to each media tag "button"
                Array.prototype.forEach.call(mediaFilters, function (filter) {
                    filter.addEventListener('click', function (e) {
                        e.preventDefault();
                        // var selectedMediaFilter = controlsContainer.querySelector('.media.selected');
                        //console.log("Media tag: " +this.innerHTML); *THIS WORKS*
                        filterHandler(this, "media");
                    });
                });

                Array.prototype.forEach.call(industryFilters, function (filter) {
                    filter.addEventListener('click', function (e) {
                        e.preventDefault();
                        //  var selectedIndustryFilter = this.querySelector('.industry.selected');
                        //  console.log("Industry tag: " +this.innerHTML); *THIS WORKS*

                        filterHandler(this, "industry");
                    });
                });
            };

            return {
                init: function () {
                    setGridSize();
                    attachResize();
                    attachClick();
                    preloadImages();

                    // portfolio page
                    if (controlsContainer) {
                        attachFilters();
                    }
                }
            };
        })();

        portfolioGrid.init();
    });
}());

$ = jQuery.noConflict();

（函数（$）{
document.addEventListener（“DOMContentLoaded”），函数（事件）{
//用于投资组合交互
var portfolioGrid=（函数（）{
var gridSize=未定义，
parentContainer=document.querySelector（'.portfolio item container'）；
containers=parentContainer.querySelectorAll（'.view'），
抽屉=parentContainer.querySelector（“.抽屉”），
bannerContainer=抽屉.querySelector（“.banner容器”），
thumbsContainer=drawer.querySelector（“.thumbs容器”），
descriptionContainer=drawer.querySelector（“.client description”），
clientNameContainer=drawer.querySelector（'.client name'），
controlsContainer=document.querySelector（“.portfolio controls container”），
selectedMediaFilter=“”，selectedIndustryFilter=“”；
var setGridSize=函数（）{
var windowSize=window.innerWidth，
previousGridSize=网格大小；
如果（窗口大小>1800）{
网格大小=5；
}否则，如果（窗口大小>900）{
网格大小=4；
}否则如果（windowSize>600&&windowSize=containers.length？containers.length-1:cI]；
};
var openDrawer=函数（）{
drawer.className='drawer'；
scrollToBanner（）；
};
var scrollToBanner=函数（）{
var mainContainer=document.querySelector（“#主容器”），
mainBounding=mainContainer.getBoundingClientRect（），
scrollY=（drawer.offsetTop-mainbunding.bottom）-10，
currentTop=document.body.getBoundingClientRect（）.top；
设置动画（document.body，“scrollTop”，“”，document.body.scrollTop，scrollY，200，true）；
};
var animate=函数（元素、样式、单位、从、到、时间、道具）{
如果（！elem）返回；
var start=new Date（）.getTime（），
定时器=设置间隔（函数（）{
var step=Math.min（1，（new Date（）.getTime（）-start）/time）；
如果（道具）{
元素[样式]=（从+步*（到-从））+单位；
}否则{
元素样式[样式]=（从+步骤*（到-从））+单位；
}
如果（步骤==1）清除间隔（计时器）；
}, 25);
元素样式[样式]=来自+单位；
}
var closeDrawer=函数（）{
drawer.className='drawer hidden'；
};
var cleanDrawer=函数（）{
bannerContainer.innerHTML=“”；
clientNameContainer.innerHTML=“”；
descriptionContainer.innerHTML=“”；
thumbsContainer.innerHTML=“”；
};
var resetThumbs=函数（）{
Array.prototype.forEach.call（thumbsContainer.querySelectorAll（'.thumb'），函数（t）{
t、 className=“thumb”；
});
};
var handleBannerItem=功能（项目）{
横幅
        if(industryTags.indexOf(selectedIndustryFilter) < 0){
            return false;
        }
        else if(mediaTags.indexOf(selectedMediaFilter) < 0){
            return false;
        }

        if(industryTags.indexOf(selectedIndustryFilter) < 0 && mediaTags.indexOf(selectedMediaFilter) < 0){
            return false;
        }

  if((selectedIndustryFilter !="" && industryTags.indexOf(selectedIndustryFilter) < 0) || (selectedMediaFilter !="" && mediaTags.indexOf(selectedMediaFilter) < 0)){
        return false;
  }
  return true;