如何隐藏卡片？

【问题标题】：How can I hide the cards?如何隐藏卡片？
【发布时间】：2019-05-04 16:41:46
【问题描述】：

我正在创建一个搜索功能。此功能会查看卡片名称中匹配的字母，并删除与搜索字段中的字母不匹配的卡片。我可以移除 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";
        }
    })
})

【问题讨论】：

标签： javascript html css dom search

【解决方案1】：

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

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

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

希望对你有帮助

【讨论】：