javascript - element.getElementsByClassName 不是函数

Question

目前我在卡片过滤器工作，但我得到 jobCards[card].getElementsByClassName is not a function.

const cardHasRequirementFilter = function(card){

    for(let requirementInFilter in listForFiltering){
        let requirementsByCard = jobCards[card].getElementsByClassName("job-requirements__requirement");
        for(let requirementInCard in requirementsByCard){
            if(requirementInCard.innerHTML === requirementInFilter.innerHTML ){
                return true;
            }
        }  
    }

    return false;
}

当我调用该函数时，我是这样做的

jobCards[card].style.display = cardHasRequirementFilter(card)===true?"flex":"none";

我试过:

jobCards[card].style.display = cardHasRequirementFilter(jobCards[card])===true?"flex":"none";


const cardHasRequirementFilter = function(card){

    for(let requirementInFilter in listForFiltering){
        let requirementsByCard = card.getElementsByClassName("job-requirements__requirement");
        for(let requirementInCard in requirementsByCard){
            if(requirementInCard.innerHTML === requirementInFilter.innerHTML ){
                return true;
            }
        }  
    }

    return false;
}

我得到了同样的错误...
我尝试了 Edge 和 chrome。
我所有的代码是:

const btnsRequirements = document.getElementsByClassName("job-requirements__requirement");
const jobCards = document.getElementsByClassName("job-list__card-job");

/* All non repetible requirements existent. */
const listRequirements = {};

/* The cards will be filtered by this requirements to be 
filtered, if it's empty, then all cards will be shown.  */
const listForFiltering = {};



for (let requirement of btnsRequirements) {

    let text = requirement.innerHTML;
    listRequirements[text] = text;/* Creates a new property with the same value, if already existe, it's overited. */

    requirement.addEventListener("click", function () {

        let requirementClicked = this.innerHTML;
        listForFiltering[requirementClicked] = requirementClicked;
        filterCardsByRequirementsChoosed();

    }, false);

}

const filterCardsByRequirementsChoosed = function(){
    let numEntries = Object.entries(listForFiltering).length;
    if ( numEntries === 0){
        /* if there's no filter, then show all. */
        for(let card of jobCards){
            jobCards[card].style.display = "flex";
        }
    }else{
        for(let card in jobCards){
            jobCards[card].style.display = cardHasRequirementFilter(card)===true?"flex":"none";
        }
    }

};

const cardHasRequirementFilter = function(card){

    for(let requirementInFilter in listForFiltering){
        let requirementsByCard = jobCards[card].getElementsByClassName("job-requirements__requirement");
        for(let requirementInCard in requirementsByCard){
            if(requirementInCard.innerHTML === requirementInFilter.innerHTML ){
                return true;
            }
        }  
    }

    return false;
}

Answer 1

先看filterCardsByRequirementsChoosed功能。你有两个 for-of和 for-in循环，但使用它们就好像它们是一样的。for-of应该:

for(let card of jobCards){
 //   jobCards[card].style.display = "flex";
    card.style.display = "flex";
}

for-in正确完成，但使用 for-of是一个更好的 IMO。
因此，您似乎只是将错误的值传递给相关函数。

实际上，我确实看到您只调用了 for-in 中的问题函数。循环，并传递属性名称。所以你似乎做对了。
要记住的一件事是您的 jobCards是一个“实时列表”。因此，如果这些元素中的任何一个从 DOM 中删除，或者即使您用来获取它们的类被删除，这些元素也将从 jobCards 中删除。立即列出。