时间戳

首页 > 解决方案 > 如何隐藏卡片？

javascript - 如何隐藏卡片？

问题描述

我正在创建一个搜索功能。此功能会查看卡片名称中匹配的字母，并删除与搜索字段中的字母不匹配的卡片。我可以移除 h4 元素，但我无法移除卡。我尝试使用 ID 并在 ID 上写入样式显示，但由于某种原因这不起作用。谁能帮我？

https://jsfiddle.net/2xf8ktoq/

我尝试添加新 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";
        }
    })
})

标签： javascripthtmlcssdomsearch

解决方案

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

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

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

希望这可以帮助

推荐阅读