DOM.style.display 没有按预期工作。无法隐藏 div答案

【问题标题】：DOM.style.display is not working as intended. Can't hide divDOM.style.display 没有按预期工作。无法隐藏 div
【发布时间】：2021-02-27 03:30:49
【问题描述】：

我正在尝试使用 Fuse.js 实现搜索栏。

            const fuse = new Fuse(rows, searchOptions);
            let searchResults = fuse.search(e);

            console.log(searchResults);

            if (searchResults.length > 0) {
                rows.forEach(function (item, index) {
                    item.style.display = "none";
                    searchResults.forEach(function (searchHit, hitIndex) {
                        if (searchHit.item == item)
                            item.style.display = "flex";
                    });
                });
            }

当代码运行时，没有任何可见的事情发生。如果我用 item.style.color 替换 item.style.display 并尝试更改颜色，它会识别正确的卡片并正确着色。

我尝试添加“！important”，但结果保持不变。我也尝试过 $(item).hide() 徒劳无功。

【问题讨论】：

stackoverflow.com/questions/5375449/…

标签： javascript html jquery css dom

【解决方案1】：

您的代码看起来不错。我认为您的问题可能与if 语句有关。之后尝试添加else，因为if 语句中的代码将仅在该条件下运行。尝试添加 alert() 进行测试。当我的代码没有按预期运行时，我会做三件事：

我检查我的代码并检查语法错误。
我检查控制台，看看是否有任何我可能遗漏的错误。
我在代码的某些部分之后添加console.log(1) 或alert(1) 以查看该代码是否可以运行。

【讨论】：

【解决方案2】：

建议如下：

if (searchResults.length) {
  rows.forEach(function (item) {
    if (searchResult.indexOf(item.textContent) >= 0) {
      item.style.display = "flex";
    } else {
      item.style.display = "none";
    }
  });
}

这将迭代每一行并查看item 是否在searchResults 数组中。这假定 item 是一个元素，将在数组中。

根据您的代码，我怀疑rows 是一些 HTML 元素的集合。假设它们是字符串，则在将其压缩为 searchResults 时，您将希望获得该元素的 textContent。

【讨论】：

【解决方案3】：

搞定了！谢谢！

我仍然不确定出了什么问题，但是使用 Bootstrap “d-none” 类隐藏 div 有效。

if (searchResults.length > 0) {
    rows.forEach(function(item){
        item.classList.remove("d-flex");
        item.classList.add("d-none");
        searchResults.forEach(function (searchHit){
            if(searchHit.item == item){
                item.classList.remove("d-none");
                item.classList.add("d-flex");
            }
        });
    });
}

【讨论】：