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 更好一些。

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

---

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

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