未捕获的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：在HTMLLabelElement.checkbox.addEventListener器：querySelector不是在checkedInputs（1013 functions.js）中所定义（functions.js：1022）

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

Answer 1

该文献方法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);
}