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（functions.js：1022）的checkedInputs（functions.js：1013）处未定义querySelector

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

Answer 1

Document方法querySelector()返回其中的第一个Element 与指定选择器或一组匹配的文档选择器。如果没有找到匹配项，则返回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);
}

过滤器组项目的未捕获ReferenceError

1 个答案: