Question

我正在创建搜索功能。此功能将查找卡名中匹配的字母，并删除与搜索字段中的字母不匹配的卡。我可以删除h4元素，但不能删除卡。我试图使用一个ID并在该ID上写样式显示，但是由于某些原因，它不起作用。谁能帮我吗？

我尝试添加新的ID和显示/隐藏，但出现错误。

const cardBox = document.querySelectorAll("#cardSort");
searchField.addEventListener("keyup", function(e){
    const term = e.target.value.toLowerCase();
    const cardsName = document.getElementsByTagName("h4");
    Array.from(cardsName).forEach(function(card){
      const title = card.textContent;
        if(title.toLowerCase().indexOf(term) != -1){
            card.style.display = "block";
        } else {
            card.style.display = "none";
        }
    })
})

Answer 1

我看到您正在搜索h4，只是在h4上切换block属性。这就是为什么它只隐藏标题而不是完整卡片的原因。要隐藏卡，您需要为卡设置block: none属性，而不仅仅是标题。

此外，我看到您正在为所有卡设置id='cardSort'。由于id是dom中的唯一属性，因此最好改为设置name="cardSort"。如果您的卡标题/名称是唯一的，则可以将其设置为每张卡的ID。然后，您可以使用document.getElementsByName('cardSort')查找名称为'cardSort'的所有元素，并检查id中的搜索键是否匹配，并相应地切换显示卡。

请在此处检查您的代码是否已更新 https://jsfiddle.net/tintin64/vk7ou5me/

希望这会有所帮助

如何隐藏卡？

1 个答案: