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

Posted 2023-05-09

【中文标题】DOM.style.display 没有按预期工作。无法隐藏 div

【英文标题】：DOM.style.display is not working as intended. Can't hide 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() 徒劳无功。

【问题讨论】：

***.com/questions/5375449/…

【参考方案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");
            
        );
    );