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 在我看来更好一些。

看来您只是将错误的值传递给了相关函数。

实际上，我确实看到您只是在 for-in 循环中调用问题函数，并传递了属性名称。所以你似乎做得对。

要记住的一件事是您的 jobCards 是一个 “实时列表”。因此，如果这些元素中的任何一个从 DOM 中删除，或者即使您用来获取它们的 class 被删除，这些元素也将立即从 jobCards 列表中删除。

Answer 2

在你的循环中

for(let card of jobCards)

card 是您的变量，它将代表 jobCards 中的元素，因为它们正在被迭代。这不是索引。

所以你需要做

card.getElementByClassName(...)
card.style.display(...)

编辑— 根据下面的评论...您使用 for in 循环...迭代对象的属性。对于一个数组...这将包括索引和其他属性，如@length 等给你的错误。

element.getElementsByClassName 不是函数

element.getElementsByClassName is not a function

javascript

getelementsbyclassname

display