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列表中删除。

Answer 2

在循环中

for(let card of jobCards)

card是您的变量，它将在jobCards中的元素被迭代时表示这些元素。它不是索引。

所以你需要做

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

编辑--根据下面的评论。。。你在循环中使用for。。。其对对象的属性进行迭代。对于数组。。。这将包括索引和其他属性，如@length等，从而为您提供错误。