Javascript 引导程序4：根据标题（.card Title）和标签（.badge）过滤卡片

我正在尝试使用html、javascript和Bootstrap4创建可搜索的卡片，但我的代码无法正常工作。我想要的是，根据这三张卡片的标题（

h5.卡片标题

）和标签（

a.badge

），用搜索栏过滤它们

以下是HTML:

标题一
按钮
标题二
按钮
标题三
按钮

这是我的解决方案。分别在

.card title

和

a.badge

上使用

querySelector all

，而不是

querySelector

，并在

card\u titles

中迭代，如果找到搜索文本，则使

keep\u card=true

。然后，如果函数仍然没有找到任何内容，它将以相同的方式搜索

badge\u titles

最后但并非最不重要的一点是，如果

keep_card=true

会显示卡，否则会隐藏卡

function myFunction() {
    var input, filter, cards, cardContainer, h5, keep_card, card_titles, badge_texts, i, j;

    input = document.getElementById("myFilter");
    filter = input.value.toUpperCase();
    cardContainer = document.getElementById("myItems");
    cards = cardContainer.getElementsByClassName("card");
    for (i = 0; i < cards.length; i++) {
        //We will switch keep_card to true if we find search text in badge or title
        keep_card = false;
        //querySelectorAll returns all elements of a.badge. querySelector returns only the first element
        card_titles = cards[i].querySelectorAll(".card-body h5.card-title");
        badge_texts = cards[i].querySelectorAll(".card-footer a.badge");

        //You must loop through all card titles.
        for(j = 0; j < card_titles.length; j++) {
            if (card_titles[j].innerText.toUpperCase().indexOf(filter) > -1) {
                //Found search text, now lets switch keep_card on
                keep_card = true;
                //No need for further looping, we found the card, there we break loop
                break;
            }
        }

        if(!keep_card) {
            for(j = 0; j < badge_texts.length; j++) {
                if (badge_texts[j].innerText.toUpperCase().indexOf(filter) > -1) {
                    keep_card = true;
                    break;
                }
            }
        }

        if(keep_card) {
            cards[i].style.display = "";
        } else {
            cards[i].style.display = "none";
        }

    }
}

函数myFunction（）{
var输入、过滤器、卡片、卡片容器、h5、保留卡片、卡片标题、徽章文本、i、j；
输入=document.getElementById（“myFilter”）；
filter=input.value.toUpperCase（）；
cardContainer=document.getElementById（“myItems”）；
cards=cardContainer.getElementsByClassName（“卡”）；
对于（i=0；i-1）{
//找到搜索文本，现在让切换保持卡打开
保持卡=真；
//不需要进一步循环，我们找到了卡，在那里我们打破了循环
打破
}
}
如果（！保留卡）{
对于（j=0；j-1）{
保持卡=真；
打破
}
}
}
如果（保留卡）{
卡片[i].style.display=“”；
}否则{
卡片[i].style.display=“无”；
}
}
}

检查您的

查询选择器

，后者应为

。卡片页脚a.徽章

。这将为您提供一个元素数组（不是单个元素），然后您必须逐个在循环中检查innerText