过滤器组项目未捕获的 ReferenceError

Question

这是我所有的代码。 这是我所有的代码。 我想知道。 为什么我要同时运行所有过滤器？ 我有麻烦了。

function customFilter(list, field, value){

    return list.filter(item=> {
            if(typeof(filter) === 'Object'){
                value.foreach(val => {
                    if (item[field] === value){
                        return item[field] === value

                    }
                });
            }
            return item[field] === value
        });
}
function checkedInputs() {
    return [...querySelector('.filter_type .customCheck')].map((c) => c.checked);
}


let filterCheckboxes = document.querySelectorAll('.customCheck');

filterCheckboxes.forEach(checkbox =>checkbox.addEventListener('change' , (e) =>{
    e.preventDefault();
    var checkboxes = checkedInputs();
    var filteredList = FlyList;
    checkboxes.forEach(checkbox => {
       let filterTypeElement = findFilterTypeElement(checkbox);
       if (filterTypeElement) {
         let field = filterTypeElement.getAttribute('data-field');
         let val = e.target.value;
         console.log(field,val);
         filteredList = customFilter(filteredList, field , val);
       }
    });
}));

function getParents(el, parentSelector /* optional */) {

    // If no parentSelector defined will bubble up all the way to *document*
    if (parentSelector === undefined) {
        parentSelector = document;
    }

    var parents = [];
    var p = el.parentNode;

    while (p && (p !== parentSelector || p.parentNode)) {
        var o = p;
        parents.push(o);
        p = o.parentNode;
    }
    parents.push(parentSelector); // Push that parentSelector you wanted to stop at

    return parents;
}

function findFilterTypeElement(el)
{
    var result = null;
    var parents = getParents(el);

    parents.forEach((item) => {
        if(hasClass(item,'filter_type') && result == null)
        {
            result = item;
        }   
    });
    return result;
}

function hasClass(element, className) {
    return (' ' + element.className + ' ').indexOf(' ' + className + ' ') > -1;
}

为了让你明白。 我得到了我的代码错误的图片。

未捕获的 ReferenceError：querySelector 未在 HTMLLabelElement.checkbox.addEventListener (functions.js:1022) 的 checkInputs (functions.js:1013) 中定义

您将看到代码和图像代码错误。 请帮忙。 代码问题在哪里？

Answer 1

Document 方法querySelector()返回文档中与指定选择器或选择器组匹配的第一个元素。 如果未找到匹配项，则返回 null。

.querySelector()的返回值是一个元素而不是元素的集合，因此它是不可迭代的，这就是您收到错误的原因，请改用querySelectorAll 。

代替

function checkedInputs() {
    return [...querySelector('.filter_type .customCheck')].map((c) => c.checked);
}

和

function checkedInputs() {
    return [...querySelectorAll('.filter_type .customCheck')].map((c) => c.checked);
}